font_
font | font_face
returns string
Generates a CSS declaration to load the provided font.
{{ settings.type_header_font | font_face }}
Code
{{ settings.type_header_font | font_face }}Data
{
"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") format("woff2"),
url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.6e9875ce64e0fefcd3f4446b7ec9036b3ddd2985.woff") format("woff");
}
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") format("woff2"),
url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.6e9875ce64e0fefcd3f4446b7ec9036b3ddd2985.woff") format("woff");
}Anchor to font_display
font_display
font | font_face: font_display: string
You can include an optional parameter to specify the property of the declaration.
{{ settings.type_header_font | font_face: font_display: 'swap' }}
Code
{{ settings.type_header_font | font_face: font_display: 'swap' }}Data
{
"settings": {
"type_header_font": {}
}
}Output
@font-face {
font-family: Assistant;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.9120912a469cad1cc292572851508ca49d12e768.woff2") format("woff2"),
url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.6e9875ce64e0fefcd3f4446b7ec9036b3ddd2985.woff") format("woff");
}
Output
@font-face {
font-family: Assistant;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.9120912a469cad1cc292572851508ca49d12e768.woff2") format("woff2"),
url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.6e9875ce64e0fefcd3f4446b7ec9036b3ddd2985.woff") format("woff");
}Was this page helpful?