The problem

Webfonts can have relatively large sizes. Iosevka for example is 660kb for one font.

The solution

You can subset your fonts, i.e. generate a font with only the glyphs you need. With font subsetting I was able to reduce the size of Iosevka from 660kb to 12kb.

How to

1. Install glyphhanger with npm
2. Install fonttools, brotli and zopfli with pip
3. Start your local server (you can skip this if you want to use a remote target)
4. Call glyphhanger with the remote target and your base font.

Glyphhanger will start a headless Chrome, load your page(s), determining the glyphs you need.

I cannot recommend using the --spyder argument as it didn’t seem to work for me, but that would be the easiest solution as it follows links from the inital page up to 10x.

Instead for my website I’m using the command to subset Iosevka (localhost:1313 is the address of the local Hugo server):

glyphhanger $(curl -s http://localhost:1313/sitemap.xml | grep loc | sed 's/\s*<loc>//' | sed 's/<\/loc>//' | tr '\n' ' ') --family="iosevka web" --formats=woff2,woff --subset="./fonts/iosevka-*.ttf"

It’s a bit hacky ngl, maybe I will propose a change to the tool to parse the sitemap itself.