Web Font Loading Budget and Best Practices
Set a budget for web font loading and learn techniques to minimize font impact on performance: subsetting, font-display, variable fonts, system font stacks, and preloading strategies.
Detailed Explanation
Web Font Loading Budget
Web fonts enhance design but come at a performance cost. A single font file ranges from 20-100 KB, and many sites load 4-8 font files (multiple weights and styles), easily consuming 200-400 KB just for typography.
Setting a Font Budget
| Budget Level | Size | Strategy |
|---|---|---|
| Minimal | 0 KB | System font stack only |
| Lean | 30-50 KB | 1 font, 1-2 weights, subset |
| Moderate | 50-80 KB | 1-2 fonts, 2-3 weights, subset |
| Rich | 80-120 KB | Variable font + subset |
Font Subsetting
Most Latin-script pages use only 100-200 characters. A full font file includes 500+ glyphs for all languages. Subsetting removes unused characters:
- Full Roboto Regular: 168 KB (uncompressed)
- Latin subset: 15 KB (gzip compressed)
- Custom subset (basic Latin + numerals): 10 KB
Use tools like glyphanger, pyftsubset, or Google Fonts &text= parameter to generate subsets.
Variable Fonts
Variable fonts contain all weight/width/italic variations in a single file:
- 4 separate files (Regular, Bold, Italic, Bold Italic): ~80 KB total
- 1 variable font file: ~40-60 KB
Variable fonts reduce HTTP requests and often reduce total size when you need 3+ variations.
font-display Strategy
The font-display CSS property controls what happens while fonts load:
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap; /* Show fallback immediately, swap when loaded */
}
- swap — Best for body text. Shows fallback font immediately, swaps when custom font loads.
- optional — Best for performance. Loads font only if available immediately (e.g., cached).
- fallback — Compromise: short invisible period, then fallback, then swap.
Preloading Critical Fonts
Preload fonts needed for above-the-fold content:
<link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin>
Only preload 1-2 critical font files. Preloading too many fonts delays other resources.
System Font Stacks as Alternative
For maximum performance, consider system font stacks:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
This uses the operating system's built-in fonts with zero download cost. The visual difference is minimal for body text.
Use Case
Font budget planning is important for brand-focused sites where typography is a key part of the design system, but also for performance-critical applications where every kilobyte counts. A news site might choose a single variable font at 45 KB with Latin subset, using font-display: swap to avoid Flash of Invisible Text (FOIT). An internal dashboard might skip custom fonts entirely, saving 50-100 KB and eliminating layout shift from font loading.