Liquid Font filters in Shopify

There are a ton of fonts in the font library of Shopify that you can use for free. You are able to use fonts filters to obtain font variables or to load fonts. Please check out more fonts and their variants here in Shopify’s font library.

However, please keep reading our instructional writing on Liquid Font filters: Font Modify, Face, URL to know more deeply about this topic.

Liquid Font filters

Font Modify

There is a fact that font_modify does take 1 arguments. The first can indicate which property should be edited and the second one is the modification to be made. Actually, you are able to access specific styles and weights more without any diffidults merely by using the font_modify filter instead of using font.variants to access each variant of the chosen font’s family.

For instance,

{% assign bold_italic = settings.body_font | font_modify: 'weight', 'bold' | font_modify: 'style', 'italic' %}

The properties and modifications given below can be used:

Property Modification Behavior
style norrmal Returns the normal variant of the same weight in case it exists.
  italic Returns the italic variant of the same weight in case it exists.
  oblique Has similar behaviors as italic. No one of the font families which Shopify provides have both oblique styles italic.
weight 100900 Returns a variant of the same style with the given weight in case it exists.
  normal Has the same behavior as 400.
  bold Has the same behavior as 700.
  +100+900 Returns an incrementally bolder font of the similar style (in case it exists). For instance, when font has a weight of 400, then font | font_modify "weight", "+100" returns the variant with a weight of 500 for the similar style.
  -100-900 Returns an incrementally lighter font of the similar style (in case it exists). For instance, if font has a weight of 400, then font | font_modify "weight", "-100" returns the variant with a weight of 300 for the similar style.
  lighter Returns a lighter variant of the similar style by applying the rules employed by the CSS font-weight property and browser fallback weights (in case it exists).
  bolder Returns a lighter variant of the similar style by applying the rules employed by the CSS font-weight property and browser fallback weights (in case it exists).

Handling font variants

In case the font_modify filter strives to generate a font variant that does not exist, then it returns nil. The example given below can show the output in case no bolder variant of settings.body_font exists:

Input
{% assign bolder_font = settings.body_font | font_modify: 'weight', 'bolder' %}
h2 {
  font-weight: {{ bolder_font.weight }};
}      
Output
h2 {
  font-weight: ;
}

To save this from happening, you are able either check the value of bolder_font with a control flow tag, or assign a specific fallback value with the default filter:

Example
{% assign bolder_font = settings.body_font | font_modify: 'weight', 'bolder' %}
{% if bolder_font %}
h2 {
  font-weight: {{ bolder_font.weight }};
}
{% endif %}

Font Face

Returns a CSS @font-face declaration to load the picked font.

Input
<style>
  {{ settings.heading_font | font_face }}
</style>
Output
<style>
  @font-face {
    font-family: "Neue Haas Unica";
    font-weight: 400;
    font-style: normal;
    src: url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff2"),
         url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.06cdfe33b4db0659278e9b5837a3e8bc0a9d4025.woff?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff");
  }
</style>

Additional properties

The front_face filter takes an optional front_display argument to adjust the front-display property of the @front-face declaration.

Input
<style>
  {{ settings.heading_font | font_face: font_display: 'swap' }}
</style>
Output
<style>
  @font-face {
    font-family: "Neue Haas Unica";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff2"),
         url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.06cdfe33b4db0659278e9b5837a3e8bc0a9d4025.woff?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff");
  }
</style>

Font URL

Returns a CDN URL for the picked font.

Input
{{ settings.heading_font | font_url }}
Output
https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv

By default, font_url returns the woff2 version, but it can also be called with an additional parameter to specify the format. Both woff and woff2 are supported.

{{ settings.heading_font | font_url: 'woff' }}

Conclusion

Thank you for reading! We hope that we did get you through all information you need. Please check more previous posts which are related.