Support for variable fonts with the Shopify font library

Short description of issue

The Shopify font library currently forces you to choose a font weight and doesn’t let you load one variable font file with all weights

Reproduction steps

  • Add a font_picker setting to settings_schema.json.
  • Choose ‘Mona Sans’ font.

Expected:

  • ‘Variable’ option for weight to load variable font with all weights available.
    or
  • ‘Mona Sans Variable’ font choice.

Actual:

  • You’re forced to choose a value for the font weight (e.g. ‘Bold’).
  • No ‘Variable’ option to load only one font file with all the weights.

Additional info

This is an open source font with 3 axes (weight, width, italic) and the source code is available here.

Please note that the ‘width’ axis is already supported for this font within the Shopify font library, but the ‘weight’ and ‘italic’ axes aren’t.

What type of topic is this

Feature request

Upload screenshot(s) of issue


I don’t think this is a wise idea, it was most likely done like this for a reason. Why load all those weights? You just need to go about using font_modify and font_face within your theme to load the other weights if you required them.

1 Like

Variable fonts are still quite new so I think it just hasn’t been considered yet rather than purposefully excluded.

With a variable font the file size is smaller because the multiple weights are all within one font file vs loading individual font files for each weight, so that would be a reason why.