font-display: swap Explained
Most PopularEliminate invisible text during font loading. The easiest performance win you can implement in 30 seconds.
⚡
Performance Guides
Optimize font loading for Core Web Vitals. Fix Lighthouse warnings, eliminate render-blocking, and achieve faster page loads.
Quick Answer
The fastest font performance fix: Add font-display: swap to your @font-face rules. This shows fallback text immediately while fonts load, eliminating invisible text and improving Largest Contentful Paint (LCP).
Core Web Vitals & Fonts
EssentialHow fonts affect LCP, CLS, and FID. Understand the metrics and optimize for Google rankings.
Preloading Fonts
Use link rel="preload" to prioritize critical fonts. Learn when preloading helps vs hurts.
Font Loading Strategies
FOIT vs FOUT, Font Loading API, and modern approaches. Choose the right strategy for your site.
Fix Lighthouse Font Warnings
Step-by-step guide to fixing "Ensure text remains visible during webfont load" and other font audits.
Related Topics
Optimize Your Fonts Now
Upload any font and get an optimized WOFF2 in seconds. No CLI required.
Try Sift Free