Liquid Font filters in Shopify
Drive 20-40% of your revenue with Avada
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 |
100 → 900 |
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.
Liquid
