font_modify

font | font_modify: string, string

returns font

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.

Tip

You can access every variant of the chosen font's family by using font.variants. However, you can more easily access specific styles and weights by using 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`	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.

{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}

h2 {

font-weight: {{ bold_font.weight }};

}

{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}

h2 {
  font-weight: {{ bold_font.weight }};
}

{
  "settings": {
    "type_body_font": {}
  }
}

Output

h2 {

font-weight: 700;

}

Non-existent font variants

If the font_modify filter tries to create a font variant that doesn't exist, then it returns nil. To handle this, you can either assign a fallback value with the default filter, or check for nil before using the variant.

{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}

{%- assign italic_font = settings.type_body_font | font_modify: 'style', 'italic' -%}

{%- assign heavy_font = settings.type_body_font | font_modify: 'weight', '900' | default: bold_font -%}

{%- assign oblique_font = settings.type_body_font | font_modify: 'style', 'oblique' | default: italic_font -%}

h2 {

font-style: {{ heavy_font.weight }};

}

.italic {

{% if oblique_font -%}

font-style: {{ oblique_font.style }};

{%- else -%}

font-style: {{ italic_font.style }};

{%- endif %}

}

{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}
{%- assign italic_font = settings.type_body_font | font_modify: 'style', 'italic' -%}
{%- assign heavy_font = settings.type_body_font | font_modify: 'weight', '900' | default: bold_font -%}
{%- assign oblique_font = settings.type_body_font | font_modify: 'style', 'oblique' | default: italic_font -%}

h2 {
  font-style: {{ heavy_font.weight }};
}

.italic {
  {% if oblique_font -%}
    font-style: {{ oblique_font.style }};
  {%- else -%}
    font-style: {{ italic_font.style }};
  {%- endif %}
}

{
  "settings": {
    "type_body_font": {}
  }
}

Output

h2 {

font-style: 700;

}

.italic {

font-style: ;

}

Was this page helpful?