This is a technical post. If I don’t write this down and publish it, I’ll never remember the details again. Don’t read this if it doesn’t sound interesting. However, you can also skim it to get the non-technical gist and learn something about how websites get made!
Background
Using web fonts can make websites look amazing, but they can also be HUGE files that slow down a website’s load time. Fonts are often the single largest file I’m loading on a site.
Today, I’m working on a site where load time matters a lot and we need to load three custom fonts. Not great! However, I’ve got a process working in this moment that can cut the size of a file from 4,491KB to 281KB (that’s 94% smaller!) and 673kb to 63kb (90%).
Step 0: Install fonttools
fonttools is a command line tool written in python that can transform and compress fonts. Today, I learned that it can do all three steps I need when slimming down a font.
I’ve had fonttools installed for a while, so I got to skip this step today. I’m running them in Windows Subsystem for Linux (WSL) which works nicely.
Step 1: Remove and adjust variable axes
This was today’s specific breakthrough and came from How to disable a variable font’s variation features with open source tools.
Using fonttools, I can remove or adjust variable axes:
fonttools varLib.instancer My-VariableFont_opsz,wdth,wght.ttf wdth=drop opsz=drop wght=300:700That removes the `wdth` and `opsz` axes and slices off 700-900 of the `wght` axis. I won’t be using any of those features on site, and so I don’t need a file with all the extra bytes required to support them!
This will create a new file called `{Whatever your file name was}-partial.ttf`.
I’ve previously used the GUI tool Slice for this, but it was last updated in 2021 and no longer seems to work for me (or is so slow that it seemed like it wasn’t work?). I don’t know. Either way, I’m happy just using the command line for this.
Step 2: Subset & Compress
Next, I stop in the middle of the last article and switch over to How to subset a variable font.
The details always vary depending on the font and site needs, but it’s generally something like this:
pyftsubset My-VariableFont_opsz,wdth,wght-partial.ttf --unicodes=
"U+0020-007F, U+00A0-00FF, U+0100-017F, U+2000-206F, U+FB00-FB4F" --layout-features='*' --flavor="woff2" --output-file="
My-VariableFont.woff2"This step:
- Removes font features that I don’t need
- Removes character ranges that I don’t need
- Converts the font to woff2 for web usage
- Renames the file name to what I want
The article above includes good details and reference links about what those unicode ranges mean.
This step can make an absolutely huge difference for “CJK” fonts—those with Chinese, Korean, and/or Japanese characters—in particular.
I hope that helps someone out there! I know for sure that I’ll be back to reference this as soon as I’ve forgotten it all in three months.