How do you split fonts into multiple files with unicode-range?

[vnphanquang]

I was searching the web for ways to optimize fonts and thought hmm, let's see how the vue/vite eco does it (always a good inspiration pool). I see here fonts are split into subsets with different unicode ranges. This is very good imo for most of my practical use cases.

Can anyone share the strategy for how to do this? Is there a dedicated tool? Any caveats?

Thank you!

[brc-dd]

I'd used https://github.com/fonttools/fonttools for that. This command to be specific: https://fonttools.readthedocs.io/en/latest/subset/index.html

Refer https://stackoverflow.com/a/49755188/11613622, you can also refer the other answer (it's an npm package instead of a python one, haven't tried it though).

Not sure about the caveats though, but IMO should always save the bandwidth unless one is using all sorts of unicode ranges in their app. Might not work (properly) in legacy browsers: https://caniuse.com/font-unicode-range

[brc-dd]

Seems like their font file has no glyph for 400 weight. For rest of the weights it's being applied properly.

[vnphanquang]

Ah, makes sense. That explains why inter-latin fetched from vuejs.org is just 36kb, way smaller than what I expect. Thanks for investigating @brc-dd

[brc-dd]

I'm not exactly sure if 400 is actually missing as it is a variable font (it's working even for 399 and 401), something is messed up with font-face declarations probably.

[vnphanquang]

I tried replacing the new latin subset in vuejs.org (in my localhost) with one extracted using with the woff2 web variable downloaded from https://rsms.me/inter, which worked fine. So yeah maybe something went wrong during the pyftsubset operation.

[brc-dd]

The fonts present on vuejs/theme repo weren't generated using pyftsubset. They were probably downloaded from Google Fonts itself. If I remove all font-faces there except the first one and remove the unicode-range, even then everything works fine (with those same font files).