@font-face generator by OpenThinking

Font name

Apply font to

Font weight

Font style

Normal

Italic (Oblique)

Font URL Leave the URL input empty if you do not have a specific font type.

URL .woff

URL .woff2

URL .ttf

URL .otf

URL .eot

TTF OTF are not webfont file types. Use only as fallback.

<style>
@font-face {
  font-family: "{{ fontfamily }}";
  font-weight: {{ fontWeightSe }};
  font-style: {{ fontstyle }};
  font-display: swap;
  src:	url("{{ urlWoff }}") format("woff"),	url("{{ urlWoff2 }}") format("woff2"),	url("{{ urlTtf }}") format("truetype"),	url("{{ urlOtf }}") format("opentype")
}

:root { --fontFamily: "{{ fontfamily }}"; --hFontFamily: "{{ fontfamily }}"; --logoFontFamily: "{{ fontfamily }}"!important;}
</style>

Copy and Paste the generated code inside your global-fonts.liquid file.