TL;DR
Font Subsetting trims unused characters (glyphs) from font files, significantly reducing their size. This speeds up text rendering, reduces layout shifts, and improves the overall visual experience of your website—especially on slower networks or font-heavy pages.
Fonts define a site’s identity—but they’re also one of the least optimized resources on many websites.
While images and scripts usually get the optimization spotlight, font files are often left untouched. That’s a missed opportunity.
Here’s why:
- Fonts are often large files
- They’re usually loaded early in the render process
- Most websites use only a small portion of the glyphs included
Loading full font files—even when you only need a fraction of them—slows down rendering, increases FOUT/FOIT, and impacts Core Web Vitals like CLS and LCP.
Font Subsetting changes that. Read on to learn how to use this feature to speed up your WordPress site.
What Is Font Subsetting?
Font subsetting is the process of removing unused characters (glyphs) from a font file. That includes letters, numbers, symbols, or even icon sets that aren’t used on the current page.
By trimming down to only what’s required, your font files become significantly smaller and faster to load.
This optimization leads to:
- Quicker font rendering
- Fewer network requests
- Reduced visual shifts
- Better overall UX
Most importantly: It works automatically, per page. Each page loads only the glyphs it actually uses.
Test NitroPack yourself
With vs Without Font Subsetting (Example)
When font subsetting is not applied, websites typically load full font files—even if only a fraction of the characters are actually used on a given page. This results in unnecessary data being transferred and slows down how quickly text appears to users.
By contrast, enabling font subsetting ensures that each page loads only the exact glyphs it needs. It has a measurable impact on performance and perceived speed—especially for:
- Font-heavy websites (e.g., blogs, ecommerce)
- Multilingual pages using multiple character sets
- Icon libraries (Font Awesome, Material Icons)
| Scenario | Without Font Subsetting | With Font Subsetting |
| Font file size | Full file with all glyphs | Subset to only used glyphs |
| Initial load time | Slower due to large file | Faster due to lightweight fonts |
| FOUT (Flash of Unstyled Text) | High chance, especially on mobile | Minimal to none |
| CLS (Layout Shifts from font swaps) | Likely on slow connections | Greatly reduced |
| Rendering strategy | Waits for all fonts to load | Loads only what’s needed immediately |
| Font icon sets (e.g., Font Awesome) | Entire set included, even unused icons | Only used icons included |
Why Is Font Subsetting Important?
Font Subsetting reduces font file sizes drastically, speeds up text rendering, and minimizes unnecessary network requests. The end result:
- Reduced Layout Shifts (CLS): With smaller fonts, the browser applies styles more predictably, improving layout stability.
- Better User Experience and Visual Consistency: By eliminating large font delays, you prevent FOUT and FOIT, ensuring smooth text rendering.
- Faster Rendering: Smaller fonts load faster, especially over 3G or slower mobile networks—boosting FCP and LCP.
Additionally, Font Subsetting directly helps resolve the following PSI warnings:
- Eliminate render-blocking resources – Subsetted fonts are often inlined or significantly smaller, which reduces or removes their blocking effect on rendering.
- Ensure text remains visible during webfont load – Subsetting makes fonts load faster, helping avoid the flash of invisible text (FOIT).
Font Subsetting in NitroPack Explained
When Font Subsetting is enabled in NitroPack:
- NitroPack scans each page and identifies which characters (glyphs) are used
- It generates a custom subset of the font for that page
- Unused glyphs and icons are removed
- If small enough, the font is inlined in the HTML, skipping extra network requests
This optimization is applied automatically, page-by-page.
| Use Case | Recommended Approach |
| Blog with custom headers and icons | Enable Font Subsetting |
| Ecommerce site with multilingual content | Enable Font Subsetting |
| Portfolio with large icon libraries | Enable Font Subsetting |
| Design system using every glyph intentionally | Use full font (disable) |
NitroPack vs Manual Font Subsetting
Manual font subsetting involves editing font files, rebuilding CSS, and testing on every device. NitroPack handles it all with a single toggle:
| Feature | Manual Setup | NitroPack Automation |
| Removes unused glyphs | ⚠️ Requires editing fonts | ✅ Yes, automatically |
| Per-page font optimization | ❌ Manual or not feasible | ✅ Optimized for each page |
| Inlines fonts into HTML | ❌ Complex build required | ✅ Built-in |
| Works with icon fonts (e.g., FA) | ⚠️ Needs separate setup | ✅ Included |
How to Enable Font Subsetting in NitroPack
Getting started is simple:
- Log in to your NitroPack dashboard
- Go to Cache Settings >> Fonts
- Enable Font Subsetting
- Choose which font types to optimize (text, icon, or both)
- Optionally, manually include glyphs to be included in the subset
- Save to apply changes
That’s it. NitroPack will handle the subsetting and apply it automatically across your site.
Need more help? Check out our Font Subsetting guide.
FAQs
What if my site uses special characters or non-Latin alphabets?
No problem—NitroPack detects used glyphs on each page, including special symbols or characters from other alphabets.
Will this break icon fonts like Font Awesome?
No. NitroPack supports icon fonts and only removes unused icons—your used ones will remain intact and render perfectly.
Can I test it before pushing live?
Yes. Use NitroPack’s Test Mode to test subsetting on live URLs without affecting your actual visitors.
What happens if a character is needed later via JS?
If new characters are injected after page load, they might not appear unless you include them initially. For dynamic use cases, keep subsetting disabled or ensure those characters are on the page during load.
