Font Subsetting vs Full Fonts: Complete Optimization Guide
Understanding font subsetting, performance benefits, implementation strategies, tradeoffs, and how to choose between subset and full fonts for optimal web performance
In Simple Terms
Subsetted fonts contain only needed characters (50-90% smaller). Full fonts include all glyphs for maximum flexibility.Use subsetting for: Landing pages, marketing sites, controlled content. Use full fonts for: User-generated content, multilingual sites, CMS platforms.Tools: Glyphhanger (automatic), pyftsubset (manual control), Font Squirrel (web GUI). Always keep original full font files.
In this article
Font subsetting is the process of creating a smaller font file that contains only a specific subset of characters from the original complete font. Instead of including all 1,000+ glyphs covering dozens of languages and special characters, a subset font might contain only the 200-300 characters actually used on your website. This optimization technique can reduce font file sizes by 50-90%, dramatically improving page load performance without any visual difference for your users.
The decision between using subset fonts versus full fonts involves balancing performance against flexibility. Subset fonts load faster and use less bandwidth, which improves Core Web Vitals, reduces server costs, and enhances user experience—especially on mobile connections. However, subset fonts sacrifice flexibility: if you later need characters not included in the subset (accented letters, special symbols, additional languages), those characters won't display correctly, appearing as missing glyph boxes.
Modern web performance best practices strongly favor aggressive font subsetting for production websites. With proper planning and the right tools, you can achieve 70-90% file size reductions while maintaining full functionality for your content. This guide explores every aspect of font subsetting—from basic concepts to advanced implementation strategies—helping you make informed decisions about font optimization for your specific needs.
What is Font Subsetting?
The Concept Explained
A typical professional font contains thousands of glyphs to support multiple languages, special characters, ligatures, and alternates. Most websites use only a tiny fraction of these characters.
Full Font Example (Roboto):
- • Total glyphs: 1,294 characters
- • Basic Latin: A-Z, a-z, 0-9, punctuation
- • Latin Extended: À, É, Ñ, Ø, etc.
- • Cyrillic: А, Б, В, Г, Д, etc.
- • Greek: Α, Β, Γ, Δ, etc.
- • Vietnamese: Ạ, Ả, Ã, etc.
- • Symbols: €, ™, ©, arrows, math
- • TTF file size: 168 KB
- • WOFF2 file size: 53 KB
Subset Font (Latin Basic Only):
- • Total glyphs: 218 characters
- • A-Z (uppercase)
- • a-z (lowercase)
- • 0-9 (numbers)
- • Basic punctuation (. , ! ? ; :)
- • Common symbols (@ # $ % & *)
- • No extended characters
- • TTF file size: 45 KB (73% smaller)
- • WOFF2 file size: 14 KB (74% smaller)
How Subsetting Works
Font subsetting tools analyze the original font file and create a new font containing only specified characters:
- Character Selection: You specify which characters to include (via Unicode ranges or actual characters)
- Glyph Extraction: Tool extracts only the selected glyph outlines from the original font
- Table Optimization: Font tables (cmap, glyf, etc.) are rebuilt with only necessary data
- Feature Preservation: OpenType features (ligatures, kerning) maintained for included glyphs
- New Font File: Output is a complete, valid font file with dramatically reduced size
What Gets Removed During Subsetting
- Unused Glyphs: Any characters not explicitly included are removed entirely (accented letters, foreign language characters, special symbols)
- Ligatures for Missing Characters: If you remove "f" and "i" but keep other letters, the "fi" ligature is also removed
- Kerning Pairs: Kerning data for removed character combinations is eliminated
- Metadata: Often stripped to reduce size further (copyright notices, designer info, etc.)
- Hinting Instructions: Sometimes simplified or removed if no longer needed
Important: Subsetting is Irreversible
Once you create a subset font, you cannot "add back" missing characters. You must:
- • Keep the original full font file as your source
- • Regenerate subsets when you need different character sets
- • Never use subset fonts as the source for further subsetting
- • Always subset from the complete original font
File Size and Performance Impact
Real-World File Size Comparison
| Font Variant | Glyphs | WOFF2 Size | Reduction |
|---|---|---|---|
| Full Font (All Languages) | 1,294 | 53 KB | Baseline |
| Latin Extended Subset | 640 | 28 KB | 47% smaller |
| Basic Latin Subset | 218 | 14 KB | 74% smaller |
| Custom Minimal (A-Z, a-z, 0-9) | 128 | 9 KB | 83% smaller |
| Logo/Display (Specific Letters) | 30-50 | 4-6 KB | 88-92% smaller |
Performance Impact: Real Website Example
Scenario: Blog using 4 font files (Regular, Italic, Bold, Bold Italic)
Full Fonts:
- • Regular: 53 KB
- • Italic: 51 KB
- • Bold: 55 KB
- • Bold Italic: 53 KB
- Total: 212 KB
- Load time (4G): ~1.4s
Latin Subset:
- • Regular: 14 KB
- • Italic: 13 KB
- • Bold: 15 KB
- • Bold Italic: 14 KB
- Total: 56 KB
- Load time (4G): ~0.4s
Performance Gains:
- • 156 KB saved (74% reduction)
- • 1 second faster font load on typical mobile
- • 15.6 MB saved per 100,000 visitors (bandwidth cost reduction)
- • Better Core Web Vitals: Improved LCP and FCP
- • Lower bounce rate: Faster pages keep users engaged
Network Speed Impact
| Connection Type | Full (212 KB) | Subset (56 KB) | Time Saved |
|---|---|---|---|
| 2G (250 Kbps) | 6.8s | 1.8s | 5.0s |
| 3G (750 Kbps) | 2.3s | 0.6s | 1.7s |
| 4G (1.5 Mbps) | 1.1s | 0.3s | 0.8s |
| 4G LTE (5 Mbps) | 0.34s | 0.09s | 0.25s |
The performance benefit is most dramatic on slower connections where many mobile users operate. Even on fast connections, the improvement is measurable and contributes to better user experience.
Subsetting Strategies
1. Language-Based Subsetting
The most common approach: include character ranges for languages your site uses.
Latin Basic (English-only sites):
Unicode Range: U+0000-00FF, U+0131, U+0152-0153
Includes: A-Z, a-z, 0-9, basic punctuation, common symbols
Best for: English-only blogs, US-focused businesses, apps with controlled content
Latin Extended (Western European):
Unicode Range: U+0000-00FF, U+0100-017F, U+0180-024F
Includes: Basic Latin + French, German, Spanish, Portuguese, Italian accents
Best for: European markets, user-generated content with Western European users
Multi-Language Subsets:
Create separate subset files for different language groups (Latin, Cyrillic, Greek) and load only what's needed
Best for: International sites serving distinct language regions
2. Content-Based Subsetting
Analyze your actual website content to include only characters you actually use.
How it Works:
- Scan all website content (HTML, CMS database, etc.)
- Extract every unique character actually used
- Create subset with exactly those characters
- Result: Minimal file size, perfect coverage
Tools for Content Analysis:
- • Glyphhanger: Scans live websites, generates optimal character lists
- • Custom scripts: Parse your CMS database or static site content
- • Manual analysis: Review content to identify needed characters
3. Use-Case-Specific Subsetting
Display/Heading Fonts:
If a font is only used for headings or logos, subset to include just those specific words. Can achieve 90%+ reduction.
Number-Only Fonts:
For pricing tables or data displays, subset to 0-9 and currency symbols only. Tiny file size.
Icon Fonts:
Include only the icons actually used on your site. Most icon fonts ship with 500+ icons; you probably use 20-30.
4. Progressive Enhancement Strategy
Load minimal subset initially, then load extended characters if needed:
/* Initial load: Basic Latin only */
@font-face {
font-family: 'Roboto';
src: url('/fonts/roboto-latin.woff2') format('woff2');
unicode-range: U+0000-00FF;
}
/* Load on-demand: Extended Latin */
@font-face {
font-family: 'Roboto';
src: url('/fonts/roboto-latin-ext.woff2') format('woff2');
unicode-range: U+0100-017F;
}Browser only downloads extended subset if page contains those characters. Best of both worlds: small initial load, full coverage when needed.
Tradeoffs and Limitations
Limitations of Subset Fonts
1. Missing Characters Display as Boxes
If your subset doesn't include a character (e.g., café without "é"), it displays as ☐ or the fallback font renders it inconsistently.
Impact: Broken user-generated content, international names, copy-pasted text with special characters
2. Inflexibility for Dynamic Content
If content changes (new blog posts, user comments, multilingual expansion), you may need characters not in your subset.
Impact: Must regenerate and redeploy fonts, or accept missing characters
3. User-Generated Content Issues
Forums, comments, reviews—users paste content with all sorts of characters you didn't anticipate.
Impact: Emoji, special symbols, foreign characters may not display correctly
4. Maintenance Overhead
Each time you need different characters, you must regenerate subsets and update deployments.
Impact: More complex build process, testing required after changes
When Full Fonts Are Better
- International user base: Sites serving global audiences with many languages need comprehensive character coverage
- User-generated content platforms: Forums, social networks, review sites where users contribute diverse text
- Content Management Systems: If content creators need flexibility to use any character, full fonts prevent issues
- E-commerce with international products: Product names, descriptions from various countries require broad character support
- Documentation and technical writing: Code examples, math symbols, special characters are common
- Bandwidth is cheap: If serving primarily desktop users on fast connections, the performance gain may not justify complexity
Risk Mitigation Strategies
1. Conservative Subsetting
Include Latin Extended even if currently English-only. The extra 10-15 KB provides buffer for future international content without much performance cost.
2. Fallback Font Stack
Always specify comprehensive fallbacks: `font-family: 'YourFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;` Missing characters fall back to system fonts.
3. Content Auditing
Regularly scan content for characters outside your subset. Alert editors or auto-expand subset as needed.
4. Unicode-Range Technique
Use multiple @font-face rules with unicode-range to load subsets on-demand. Browser requests only needed character ranges.
Tools and Implementation
Popular Subsetting Tools
1. Glyphhanger (Recommended)
Command-line tool that scans websites and generates optimal subsets.
# Install npm install -g glyphhanger # Scan website and subset font glyphhanger https://yoursite.com --subset=font.ttf --formats=woff2 # Subset to specific characters glyphhanger --whitelist="ABCDEFGabcdefg0123456789" --subset=font.ttf
Pros: Automated, accurate, supports multiple formats
Cons: Requires Node.js, command-line knowledge
2. pyftsubset (FontTools)
Python-based tool with extensive options and fine control.
# Install pip install fonttools brotli # Basic Latin subset pyftsubset font.ttf \ --output-file=font-subset.woff2 \ --flavor=woff2 \ --layout-features='*' \ --unicodes="U+0000-00FF,U+0131,U+0152-0153"
Pros: Powerful, flexible, industry-standard
Cons: Steeper learning curve, Python required
3. Font Squirrel Webfont Generator
Online tool with GUI for subsetting, no installation needed.
URL: fontsquirrel.com/tools/webfont-generator
Pros: Easy to use, no technical skills needed
Cons: Manual process, uploads fonts to third party, limited control
4. subfont (Build Tool Plugin)
Automated subsetting integrated into build pipelines.
# Install npm install --save-dev subfont # Use in build npx subfont ./dist -i
Pros: Fully automated, integrates with builds
Cons: Less control, may require configuration tweaking
Implementation Example
Complete Workflow:
- Analyze content: Use Glyphhanger to scan your site and identify used characters
- Generate subsets: Create Basic Latin, Latin Extended, and other language variants
- Implement unicode-range: Set up CSS with multiple @font-face declarations
- Test thoroughly: Check all pages for missing characters
- Monitor performance: Measure Core Web Vitals improvement
- Automate: Add subsetting to build process for future updates
When to Subset vs Use Full Fonts
Subset Fonts When:
- ✓ Site content is controlled and predictable (corporate sites, portfolios, marketing pages)
- ✓ Target audience uses specific language(s) you can define
- ✓ Performance is critical (mobile-first, emerging markets, e-commerce)
- ✓ Bandwidth costs matter (high-traffic sites, limited hosting budget)
- ✓ You have development resources to maintain subsets
- ✓ Content rarely changes or changes are controlled (static sites, managed CMS)
- ✓ Loading speed directly impacts revenue (e-commerce, SaaS)
Use Full Fonts When:
- ✓ International audience requiring many language scripts
- ✓ User-generated content platform (forums, reviews, comments)
- ✓ Content creators need complete flexibility
- ✓ Technical resources for subsetting are unavailable
- ✓ Bandwidth and performance not critical constraints
- ✓ Need maximum compatibility and coverage
- ✓ Development simplicity preferred over optimization
Decision Matrix
| Site Type | Recommendation |
|---|---|
| Marketing landing pages | Aggressive subsetting |
| Personal blog (English) | Latin Basic subset |
| E-commerce site | Latin Extended subset |
| News/media site | Conservative subset (Latin Ext) |
| International platform | Multiple subsets or full fonts |
| Forum/social network | Full fonts |
| Documentation site | Full fonts (code, symbols) |
Best Practices and Recommendations
Subsetting Best Practices
- Start conservative, optimize iteratively: Begin with Latin Extended, measure performance, then aggressively subset if traffic and content allow
- Always keep original fonts: Never subset from subsets. Keep full source fonts for regenerating subsets
- Use unicode-range for progressive loading: Define multiple character ranges, browser loads only what's needed
- Test across all content: Check every page type (blog posts, product pages, forms) for missing characters
- Monitor for issues: Set up alerts for missing character glyphs in production
- Document your subsets: Keep records of which Unicode ranges/characters are included for troubleshooting
- Automate the process: Integrate subsetting into build pipeline for consistency
- Version control font files: Track changes to subsets over time
Common Pitfalls to Avoid
❌ Over-aggressive subsetting
Removing too many characters to save 5-10 KB, then breaking user experience when encountering edge cases. Balance file size with coverage.
❌ Forgetting about user input
Subsetting for static content but forgetting form inputs, search queries, user profiles may have unpredictable characters.
❌ Not testing internationally
Works great for English speakers, but breaks for users with international names or keyboard layouts.
❌ Breaking OpenType features
Removing characters used in ligatures or contextual alternates can break advanced typography features. Use --layout-features='*' to preserve.
The Bottom Line: Subset for Performance, Full for Flexibility
Font subsetting offers dramatic performance improvements—50-90% file size reduction—making it essential for modern web performance optimization. For controlled content sites with defined language needs, aggressive subsetting delivers faster page loads, better Core Web Vitals, and reduced bandwidth costs with zero visual difference.
However, subsetting requires planning, testing, and maintenance. Sites with user-generated content, international audiences, or dynamic content requirements may benefit more from full fonts' flexibility. The optimal approach balances performance gains against coverage needs. Start with conservative subsets, measure impact, and optimize based on your specific content and audience.
Written & Verified by
Sarah Mitchell
Product Designer, Font Specialist
SUBSETTING vs FULL FAQs
Common questions answered about this font format comparison