Web Performance
Optimize font loading for speed and Core Web Vitals — subsetting, preloading, FOUT/FOIT prevention, and CLS fixes.
Preventing Layout Shift (CLS) from Font Loading
Font loading is a hidden source of Cumulative Layout Shift. Learn size-adjust, font metric overrides, and strategies to eliminate font-related CLS.
Font Subsetting: Cut Font File Sizes by 90%
Most web fonts contain thousands of unused characters. Learn how to subset fonts to load only what you need — cutting file sizes dramatically.
font-display: swap, fallback, optional — Which to Choose
The font-display CSS descriptor controls what users see while fonts load. Each value has tradeoffs — here's how to choose the right one.
Google Fonts Performance: Speed Tips and Best Practices
Google Fonts is convenient but can slow your site. Optimize loading with display=swap, preconnect hints, self-hosting, and subset loading.
Web Font Performance: The Complete Optimization Guide
Everything you need to know about font performance — file size, loading strategies, render blocking, and how fonts affect Core Web Vitals.
Font Preloading: Prioritize Your Most Important Fonts
Use <link rel=preload> to tell the browser which fonts matter most. Reduce FOUT, improve LCP, and understand when preloading helps vs. hurts.
Variable Fonts for Performance: One File to Rule Them All
Variable fonts can replace 6+ static font files with one. The performance implications — file size, HTTP requests, and real-world benchmarks.
FOUT vs FOIT: Understanding Flash of Unstyled and Invisible Text
FOUT shows fallback text, FOIT shows nothing. Both are font loading side effects — here's what causes them and how to fix them.