Font Optimization Checklist: Complete Performance Guide
A comprehensive checklist for optimizing web font performance covering format selection, subsetting, loading strategies, caching, fallbacks, and Core Web Vitals
In Simple Terms
Convert all web fonts to WOFF2 (Inter: 288KB TTF to 98KB WOFF2, a 66% reduction. Roboto: 220KB to 53KB, 76% reduction). Subset to Latin-only for English sites (93% total reduction). Target under 100KB total font payload.Use font-display: swap + preload for critical fonts (only 12% of sites use preload -- massive opportunity). Match fallback font metrics with size-adjust/ascent-override to reduce CLS from 0.05-0.15 to under 0.01. Limit to 2-4 font files per page.Self-host fonts (provides 180ms LCP improvement over Google Fonts CDN) with immutable cache headers (max-age=31536000). Browser cache partitioning since 2020 eliminates the shared cache advantage of CDNs. Variable fonts at 40% adoption save up to 91% when replacing 9 static weight files.
In this article
1. Format Selection
| Format | Example Size (Inter Regular) | Savings vs TTF |
|---|---|---|
| TTF (uncompressed) | 288 KB | Baseline |
| WOFF (zlib) | 195 KB | -37% |
| WOFF2 (Brotli) | 98 KB | -66% |
| WOFF2 + Latin subset | 23 KB | -93% |
2. Subsetting & Character Reduction
# Subset with pyftsubset (from FontTools)
pyftsubset input.woff2 \
--unicodes="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" \
--layout-features="kern,liga,clig,calt" \
--flavor=woff2 \
--output-file=output-latin.woff2
# Result: 310KB full font → 23KB Latin WOFF2 subsetFor detailed subsetting instructions, see our Font Subsetting guide and language-specific guides for Chinese, Japanese, and Arabic fonts.
3. Loading Strategy
Pro Tip
For advanced loading patterns like two-stage rendering and Font Loading API, see our Progressive Font Loading guide. For the fundamentals, start with the Font Loading Strategies guide.
4. Caching & Delivery
# Nginx font caching configuration
location ~* \.woff2$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin "*";
add_header Content-Type "font/woff2";
}
# Vercel / Next.js: next.config.js
module.exports = {
async headers() {
return [{
source: '/fonts/:path*',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
],
}];
},
};5. Fallback Font Matching
/* Metric-matched fallback font */
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
size-adjust: 107.64%;
ascent-override: 90.49%;
descent-override: 22.56%;
line-gap-override: 0%;
}
body {
font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}
/* Tools to calculate these values:
- next/font (automatic for Next.js)
- Fontaine (github.com/unjs/fontaine)
- Capsize (seek-oss.github.io/capsize/)
*/6. Variable Font Optimization
/* Variable font @font-face */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-variable-latin.woff2') format('woff2-variations');
font-weight: 100 900; /* Full weight range in one file */
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}
/* Use any weight without additional file downloads */
h1 { font-weight: 800; }
body { font-weight: 400; }
.light { font-weight: 300; }
/* Trim unused weight range with fonttools */
/* fonttools instancer InterVariable.ttf wght=400:700 */For a complete guide, see our Variable Fonts guide.
7. Core Web Vitals Impact
| Metric | How Fonts Affect It | Optimization |
|---|---|---|
| LCP (Largest Contentful Paint) | If LCP element uses custom font, font load time adds to LCP | Preload LCP font, use font-display: swap, self-host |
| CLS (Cumulative Layout Shift) | Font swap causes text reflow when metrics differ | Match fallback metrics, use font-display: optional |
| INP (Interaction to Next Paint) | Font file parsing can delay frame rendering | Keep total font count low, use WOFF2 for fast parsing |
| FCP (First Contentful Paint) | Render-blocking font requests delay FCP | Avoid FOIT with font-display, preload critical fonts |
Complete Optimization Checklist
Use this consolidated checklist before every major deployment:
Next Steps
Run a Font Audit to identify current issues, then work through this checklist systematically. For ongoing monitoring, integrate font performance budgets into your CI/CD pipeline.
Written & Verified by
Sarah Mitchell
Product Designer, Font Specialist
Font Optimization FAQs
Common questions about optimizing web font performance