Font subsetting for Shopify-hosted fonts (load only required Unicode ranges)

Shopify Discussion
1

I’m not sure if this is the right place for this?

Currently, Shopify hosts and serves fonts via fonts.shopifycdn.com using the font_url and font_face Liquid filters. However, there is no option to load only a specific Unicode subset of a font.

For example, the font Mochiy Pop P One (a Japanese font available in Shopify’s font library) weighs nearly 2 MB as a .woff2 file because it includes thousands of Japanese characters (Kanji, Hiragana, Katakana) — even when the store only uses Latin characters.

Google Fonts solves this elegantly by serving fonts with unicode-range descriptors, splitting the font into multiple smaller files and only loading the subsets the browser actually needs.

Feature request: Please add support for Unicode subset loading for Shopify-hosted fonts — either by:

  • Automatically splitting font files by script (Latin, Japanese, Cyrillic, etc.) and using unicode-range in the generated @font-face declarations, or

  • Allowing merchants to specify which subsets to load via the font_face Liquid filter (e.g. font_face: subset: 'latin')

This would significantly improve Largest Contentful Paint (LCP) and Core Web Vitals scores for stores using non-Latin fonts.

2

Even a basic subset option in the font_face filter would probably save a lot of unnecessary payload for stores like that.

3

Totally agree, this is a long overdue feature. Loading a 2MB Japanese font for a store that only uses Latin characters is a real LCP killer and the unicode-range approach Google Fonts uses has been the standard for years. Would love to see Shopify implement even a basic subset parameter in the font_face filter.

4

As a workaround, you can self-host a subset font by uploading only the required .woff2 file to your theme’s Assets folder and using unicode-range in your @font-face CSS rule to control exactly which characters load. Tools like Glyphhanger or Font Squirrel’s Webfont Generator can create a Latin-only subset from any font file.

5

Hi @Merlin972,

You can try third party app to manually strip the font down to only the Unicode ranges you actually need.

Once you have that much smaller .woff2 file, just upload it to your theme assets and define your own custom @font-face in your CSS. This gives you full control over the subsetting and will significantly improve your LCP scores.

Hope this helps,