Font subsetting on the web made easy

February 17, 2021 2 minute read

Previous attempts of me trying to choose a new font for my website ended up with me picking Inter as the obvious winner. I like Inter, it’s clean and it’s very readable. However, its default woff2 web-font files are large. Too large.

Thankfully, I found an excellent guide on font subsetting by Markos Konstantopoulos, which allowed me to distill the process down to a few instructions. In the end, we would like to reduce our font size significantly.

Depending on your requirements, you can shrink the font size significantly: I was able to shrink the final webfont file by 79%, compared to the default woff2 file found in the repository. That means that the processed webfont file takes up only one fifth of the size of the original!

First, you’ll want to install the prerequisites:

brew install python &&
pip3 install fonttools brotli zopfli

Next, find the folder and file you want to process:

pyftsubset "Inter-Regular.otf" \
	--output-file="Inter-Regular.woff2" \
	--flavor=woff2 \
	--layout-features="*" \
	--unicodes="U+0000-00FF,U+0131,U+0152-0153, \
		U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F, \
		U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212, \
		U+2215,U+FEFF,U+FFFD"

And voila! I now have a much smaller file that supports my needs (ligatures etc. intact) as well as the common Latin glyphs I’d like to use. It’s also much smaller. That’s not bad.

But we can go further. After testing the font on Wakamai Fondue, a tool where you can see which features and glyphs your font supports, I was able to remove all features but kerning and a smaller subset of glyphs. Wakamai Fondue was used to see which glyphs I’d need (and ditch) and to verify the final result.

The final configuration I settled on is:

pyftsubset "Inter-Regular.otf" \
    --output-file="Inter-Regular-Latin1.woff2" \
    --flavor=woff2 \
    --layout-features="kern" \
    --unicodes="U+0000-00FF,U+0121-02DC,U+0131, \
        U+0152-0153,U+2013-2014,U+2018-201F, \
        U+2020-2026,U+2032-203A,U+20AC-2212"

This produced a file of 20 KB, shaving off an additional 15 KB. The final file is then one fifth the size of the original WOFF2 file supplied in the Inter repository.

Font Layout Features Code Points Size Reduction
Inter Regular (OpenType) * (none excluded) None excluded 255 KiB 0%
Inter Regular (WOFF2) * (none excluded) None excluded 99 KiB 61%
Inter Regular (WOFF2) * (none excluded) Only Latin-1* 35 KiB 86%
Inter Regular (WOFF2) kern only Only Latin-1* 20 KiB 92%

(*) Latin-1 (U+0000-00FF) with some extras as seen in the command line examples.

Tagged as: Programming