avada.io
AVADA logo
Published on
Liquid

Liquid Font filters in Shopify

751 words4 min read
Author
  • Name
    thao
    Twitter

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 {#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:

PropertyModificationBehavior
stylenorrmalReturns the normal variant of the same weight in case it exists.
italic Returns the italic variant of the same weight in case it exists.
obliqueHas similar behaviors as italic. No one of the font families which Shopify provides have both oblique styles italic.
weight100900Returns a variant of the same style with the given weight in case it exists.
normalHas the same behavior as 400.
boldHas the same behavior as 700.
+100+900Returns an incrementally bolder font of the similar style (in case it exists). For instance, when font has a weight of 400, then `font
-100-900Returns an incrementally lighter font of the similar style (in case it exists). For instance, if font has a weight of 400, then `font
lighterReturns 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).
bolderReturns 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 {#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 {#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.

Don't have a Shopify store?

Get your free trial here -->x

Exclusive Offer: Shopify Deal for PageFly Audience

Start Your Online Business with Shopify 12 Day Free Trial + Pay Only 1$ For Your First Month