Font Filters
Font filters change font objects found in font theme settings. You can apply font filters to load fonts or get different versions of fonts.
To understand how to access theme settings, see Settings.
Consult Shopify's font library for a catalog of all fonts and their versions.
font_face
font | font_face
Generates a CSS @font-face declaration to load the provided font.
font_display
font | font_face: font_display: string
You can add an optional parameter to define the font_display property in the @font_face declaration.
font_modify
font | font_modify: string, string
Modifies a specific property of a given font.
The font_modify filter requires two parameters. The first indicates which property should be modified and the second is either the new value, or modification amount, for that property.
Note: You can access every style and weight of the selected font family using font.variants. Alternatively, for quicker access to specific styles and weights, utilize the font_modify filter.
The following table outlines the valid font properties and modification values:
| Property | Modification Value | Output |
|---|---|---|
| style | normal | Returns the normal variant of the same weight, if it exists. |
| italic | Returns the italic variant of the same weight, if it exists. Oblique variants are similar to italic variants in appearance. All Shopify fonts have only oblique or italic variants, not both. |
|
| oblique | Returns the oblique variant of the same weight, if it exists. Oblique variants are similar to italic variants in appearance. All Shopify fonts have only oblique or italic variants, not both. |
|
| weight | 100 → 900 | Returns a variant of the same style with the given weight, if it exists. |
| normal | Returns a variant of the same style with a weight of 400, if it exists. | |
| bold | Returns a variant of the same style with a weight of 700, if it exists. | |
| +100 → +900 | Returns a variant of the same style with a weight incremented by the given value, if it exists. For example, if a font has a weight of 400, then using +100 would return the font with a weight of 500. |
|
| -100 → -900 | Returns a variant of the same style with a weight decremented by the given value, if it exists. For example, if a font has a weight of 400, then using -100 would return the font with a weight of 300. |
|
| lighter | Returns a lighter variant of the same style by applying the rules used by the CSS font-weight property and browser fallback weights, if it exists. | |
| bolder | Returns a bolder variant of the same style by applying the rules used by the CSS font-weight property and browser fallback weights, if it exists. |
Non-existent font variants
If the font_modify filter attempts to generate a font variation that doesn't exist, it will return nil. To manage this situation, you can set a fallback value using the default filter, or verify for nil before applying the variation.
font_url
If the font_modify filter attempts to generate a font variation that doesn't exist, it will return nil. To manage this situation, you can set a fallback value using the default filter, or verify for nil before applying the variation.
font | font_url
Returns the CDN URL for the provided font in woff2 format.
woff format
By default, the font_url filter provides the CDN URL for the font in woff2 format. However, you can also opt for woff format.
HTML
CSS
Javascript
Jquery
PHP
MySQL