Font Subsetting, Done Properly
Removing unused characters from font files so they download faster.
Marcus Adeyemi
Why does it matter?
Full font files carry characters most sites never use, and subsetting can cut font weight dramatically.
What are the numbers?
- Subsetting keeps only the glyphs a site needs
- unicode-range lets browsers download only the ranges in use
- WOFF2 is the compressed format for web fonts
- font-display controls how text renders while fonts load
What should I do?
- Subset fonts to the languages you support
- Serve WOFF2
- Use unicode-range for multilingual sites
- Set font-display to swap or optional
- Preload only critical font files
What should I avoid?
Avoid:
- Serving full multilingual fonts
- Loading many weights and styles
- Blocking render on fonts
- Subsetting so far that content breaks
When should I get help?
Short answer Bring in help when fonts dominate page weight.
Where this comes from
- web.dev — Best practices for fonts
- MDN Web Docs — unicode-range
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
