Font Subsetting Guide: Reduce Font File Size by 90%
A full-featured font like Noto Sans can contain over 50,000 glyphs and weigh several megabytes. If your website only uses English text, you're forcing visitors to download thousands of characters they'll never see. Font subsetting solves this by stripping unused glyphs, often reducing file sizes by 50–90%.
What Is Font Subsetting?
Font subsetting is the process of creating a new font file that contains only a specific set of characters (glyphs) from the original. For example, if you subset a font to just the Basic Latin range (U+0020–U+007F), the resulting file will only include the 95 printable ASCII characters — letters, numbers, and common punctuation.
The result? A dramatically smaller font file that loads faster and improves your site's Core Web Vitals scores, particularly Largest Contentful Paint (LCP) and First Contentful Paint (FCP).
Real-World Size Reduction
| Scenario | Characters Included | File Size (WOFF2) | Reduction |
|---|---|---|---|
| Full font (no subsetting) | All glyphs (~3,000+) | ~120 KB | — |
| Latin subset | 95 characters | ~15 KB | 87% |
| Latin Extended subset | ~350 characters | ~25 KB | 79% |
| Custom (English + symbols) | ~120 characters | ~12 KB | 90% |
How to Subset Fonts with Webfont Generator
The Webfont Generator makes subsetting simple with three approaches:
1. Language Presets
Choose from 23 built-in language presets (Latin, Cyrillic, Devanagari, Arabic, Bengali, Gujarati, and more). Each preset automatically selects the correct Unicode ranges for that language's character set.
2. Specific Characters
Type individual characters you want to include. This is perfect when you need just a few special characters beyond a language preset — for example, copyright symbols (©), trademark symbols (™), or specific currency signs (€ £ ¥).
3. Custom Unicode Ranges
Define precise Unicode ranges in hexadecimal format. This gives you the finest control over exactly which glyphs are included. Common ranges:
| Range | Name | Characters |
|---|---|---|
0020-007F |
Basic Latin | A–Z, a–z, 0–9, common punctuation |
00A0-00FF |
Latin-1 Supplement | Accented characters (é, ü, ñ, etc.) |
0100-017F |
Latin Extended-A | Central/Eastern European characters |
0400-04FF |
Cyrillic | Russian, Ukrainian, Bulgarian, etc. |
0900-097F |
Devanagari | Hindi, Marathi, Sanskrit, etc. |
CSS unicode-range: Advanced Subsetting
For multi-language sites, combine subsetting with the CSS unicode-range descriptor. This tells the browser to only download a font file when characters in that range actually appear on the page:
/* Latin subset */
@font-face {
font-family: 'MyFont';
src: url('MyFont-latin.woff2') format('woff2');
unicode-range: U+0020-007F, U+00A0-00FF;
}
/* Cyrillic subset */
@font-face {
font-family: 'MyFont';
src: url('MyFont-cyrillic.woff2') format('woff2');
unicode-range: U+0400-04FF;
}With this approach, a visitor viewing an English-only page downloads only the Latin subset (~15 KB), while a visitor on a Russian page gets both the Latin and Cyrillic subsets. The browser handles this automatically.
Common Subsetting Mistakes
- Forgetting ligatures: Some fonts use OpenType ligatures for common pairs like "fi" and "fl". If you subset too aggressively, you may lose these, causing rendering issues.
- Dropping the space character: Always include U+0020 (space) in your subset. Omitting it causes text to render without word breaks.
- Ignoring punctuation: Characters like em-dashes (—), smart quotes (" "), and ellipses (…) are easy to overlook but commonly needed.
- Not testing: Always preview your subsetted font with real content before deploying. The Webfont Generator includes a live preview specifically for this purpose.
Impact on Core Web Vitals
Font file size directly affects two key Core Web Vital metrics:
- LCP (Largest Contentful Paint): If your hero heading uses a custom font, the font file must download before LCP can complete. Smaller files = faster LCP.
- CLS (Cumulative Layout Shift): Smaller font files load sooner, reducing the chance of visible font-swap layout shifts. Using
font-display: swaporfont-display: optionalcombined with subsetting gives you the best CLS scores.
Pro tip: Combine subsetting with WOFF2 compression for the ultimate performance gain. A 500 KB TTF font can be reduced to under 15 KB with both techniques applied.
Bottom Line
Font subsetting is one of the highest-impact, lowest-effort performance optimizations you can make. If you're serving custom fonts on your website, you should always subset. The Webfont Generator makes it simple — just select a language preset or enter your character ranges, and the tool handles the rest, all in your browser with zero server uploads.