Reducing Asset Size with Subsetting

FYI, this is common enough that Google Fonts has subsetting built in.

You can use the Google Fonts API's 'text' parameter to specify specific glyphs, or you can use the more-general 'subset' property (e.g. subset=greek,cyrillic) to choose one or more scripts.

https://developers.google.com/fonts/docs/getting_started

Neat idea. My approach to solving this issue was configuring nginx to gzip responses with a high compression ratio. You can also precompress your asset files and tell nginx to find and serve the “.gz” compressed version of a static asset if available. This alleviates additional compute load imposed by Enabling compression.

If you are interested in reducing the font size, consider variable fonts. They are supported in pretty much every browser that matters. Although the file size is larger, it often is smaller when regular, italic, and bold variants put together.

When sunsetting, it's important to use a good alt don't too, so even if the glyph is missing from the font, it doesn't look too bad with the alt system font.

See also https://github.com/Munter/subfont#readme (or https://www.gatsbyjs.org/packages/gatsby-plugin-subfont/ for Gatsby sites).

Incredible! Thought of doing this at the app level, but hadn't thought of italics etc. The concept of doing it with puppeteer is pretty neat.