font_face

font | font_face

Generates a CSS @font_face declaration to load the provided font.

{{ settings.type_header_font | font_face }}

{
  "settings": {
    "type_header_font": {}
  }
}

Output

@font-face {

font-family: Assistant;

font-weight: 400;

font-style: normal;

src: url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.9120912a469cad1cc292572851508ca49d12e768.woff2?h1=cG9saW5hcy1wb3RlbnQtcG90aW9ucy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=44321b814b39f99d7a57aed524c140f4c10ef8f09b31a607e95e7810bf07decb") format("woff2"),

url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.6e9875ce64e0fefcd3f4446b7ec9036b3ddd2985.woff?h1=cG9saW5hcy1wb3RlbnQtcG90aW9ucy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=1776c6cf10ada605c03c3291c2db78487fed84434a95b4e6c0c9822239e63c47") format("woff");

}

font_display

font | font_face: font_display: string

You can include an optional parameter to specify the font_display property of the @font_face declaration.

{{ settings.type_header_font | font_face: font_display: 'swap' }}

{{ settings.type_header_font | font_face: font_display: 'swap' }}

{
  "settings": {
    "type_header_font": {}
  }
}

Output

@font-face {

font-family: Assistant;

font-weight: 400;

font-style: normal;

font-display: swap;

}

Was this page helpful?