Font Subsetting
Remove unused Unicode character ranges from font files to reduce their transfer size.
Metrics
This technique can move up to 67% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique can move up to 33% of CLS's share of the Lighthouse score.
This technique can move up to 67% of FCP's share of the Lighthouse score.
This technique can move up to 33% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
A font file for a Latin script website may include glyphs for Greek, Cyrillic, Chinese, Arabic, and hundreds of special symbols that will never appear on the page. Font subsetting strips those unused character ranges, producing a much smaller file containing only the glyphs the site actually uses. Combined with the CSS unicode-range descriptor, the browser only downloads the subsets it needs for the current page’s content.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, TTFB.
The Problem
A full-weight Google Font like Inter Regular can exceed 300 KB when all character sets are included. A Latin-only subset of the same font is typically 20–50 KB — a 6–15× reduction. Every byte of an unsubset font file must download before the browser can render text using that font, directly extending the render-blocking window and inflating the time to Largest Contentful Paint when text is the LCP element.
Performance Impact
LCP
50–200ms
significant when the LCP element is a heading or large text block in a web font
CLS
Indirect
font arrives sooner, reducing the window where fallback font causes layout shift
FCP
50–300ms
smaller font files load faster, reducing the text-rendering block window
SI
Indirect
faster font delivery means text renders sooner, filling the viewport earlier
Risk: Low
missing glyphs fall back to system font — easy to detect by visiting pages with diverse content
How it works
01
Identify which Unicode ranges the site uses
Audit your content for non-Latin characters. A site in English only needs the Basic Latin and Latin-1 Supplement ranges (U+0000–00FF). A multilingual site needs additional ranges — run a content audit before deciding which subsets to include.
02
Generate the subset font file
Tools like
pyftsubset(from fonttools),glyphhanger, andfontkitextract only the specified glyph ranges. Google Fonts already applies subsetting automatically via the CSS API — specify&display=swap&subset=latinin the request URL.03
Declare subsets with unicode-range in @font-face
The CSS
unicode-rangedescriptor tells the browser which characters a font file covers. The browser downloads the file only when one of those characters appears in the DOM — meaning multiple small subset files load on-demand rather than one large file loading always.04
WordPress integration
If using Google Fonts via the API, the
subsetparameter controls which character sets are included. For self-hosted fonts, generate subsets during your build process and reference them in@font-facedeclarations in the theme stylesheet.
Code Example
/* Full font: 280 KB — includes Latin, Greek, Cyrillic, Vietnamese */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-400-full.woff2') format('woff2');
font-weight: 400;
}/* Latin subset: 22 KB — 92% smaller */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-400-latin.woff2') format('woff2');
font-weight: 400;
unicode-range: 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;
}Google Fonts generates subset WOFF2 files automatically. Download them via google-webfonts-helper (gwfh.mranftl.com) and select only the character sets your content requires.
Limitations
- If your content contains characters outside the subset (e.g., user-generated content in other languages), those characters fall back to the system font, which may look inconsistent.
- Subset font files are URL-specific — if you change the character set, the cache key changes and users re-download the file.
- Variable fonts consolidate multiple weights into one file but may still be larger than the sum of individual-weight subsets if only one or two weights are used.
Common Mistakes
Including the full font file and relying on the browser to ignore unused glyphs
Browsers download the entire font file regardless of which glyphs appear on the page. Subsetting must happen at the file level — there is no browser-side glyph filtering.
Omitting unicode-range when serving multiple subset files
Without unicode-range, the browser downloads all declared font files. The descriptor is what enables on-demand loading — without it, subsetting reduces file size but not the number of requests.