Recipe: Font subsetting + variable fonts
Ship only the glyphs your users need. Combine subsetting with variable font axes to cut payload size by 70–90% while preserving full design flexibility.
Ingredients
- Variable font file (TTF or OTF) with weight/width axes
- glyphhanger or pyftsubset for glyph analysis
- Unicode-range CSS descriptor for progressive loading
- WOFF2 compression as final delivery format
Steps
1. Audit glyph usage
Run glyphhanger against production URLs to collect the exact Unicode codepoints your pages render. Export the codepoint list as a text file.
2. Subset the font
Feed the codepoint list into pyftsubset with --unicodes-file=codepoints.txt --layout-features+=kern,liga --flavor=woff2. Keep layout features your design system uses.
3. Define unicode-range
Split subsets by script (Latin, Cyrillic, etc.) and declare each with a unicode-range in @font-face. Browsers download only the ranges that match page content.
4. Verify in DevTools
Open Network tab, filter by font, and confirm only the required WOFF2 files load. Check Coverage panel for unicode-range effectiveness.
Result
A typical 400 KB variable font shrinks to 35–60 KB per script subset. Users on fast connections get the full variable experience; everyone else avoids downloading glyphs they never see.