Font Loading Strategy
Eliminate invisible text and layout shifts caused by web font loading.
Metrics
This technique can move up to 33% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique can move up to 67% of CLS's share of the Lighthouse score.
This technique can move up to 100% of FCP's share of the Lighthouse score.
This technique can move up to 33% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
When a browser encounters a web font that has not loaded, it hides text for up to 3 seconds (FOIT). The font-display CSS descriptor combined with preconnect hints and font subsetting controls exactly when text renders during that window — eliminating both invisible text and unexpected layout shifts.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, TTFB.
The Problem
Default browser font loading hides text until the web font is ready, delaying FCP by the full font load time. When the font finally loads it can also cause CLS if the fallback font has different metrics — content shifts as the font swaps in.
Performance Impact
LCP
100–400ms
if LCP element is text-based
CLS
0.05–0.15
size-adjust aligns fallback font metrics
FCP
100–600ms
text renders immediately with fallback font
SI
text renders immediately with a fallback font instead of staying invisible; visible content appears sooner even before the web font loads
Risk: Low
brief flash of fallback font may be visible
How it works
01
Set font-display: swap
Add
font-display: swapto@font-facedeclarations. Text renders immediately in a fallback font and swaps when the web font loads.02
Preconnect to font origins
Add
<link rel="preconnect">hints for the font CDN hostname to establish TCP/TLS before CSS is parsed, reducing font load latency by 100–300 ms.03
Subset fonts to used characters
Use
unicode-rangein@font-faceto load only the character sets present on the page. A full variable font can be 900 KB; the Latin subset under 50 KB.04
Use size-adjust to eliminate layout shift
Match fallback font metrics to the web font using
size-adjust,ascent-override, anddescent-overrideso no reflow occurs when the web font swaps in.
Limitations
- font-display: swap causes a brief FOUT — the fallback font is visible for the duration of the font load.
- size-adjust values require per-font tuning and are not universal.
- Third-party CDNs (Google Fonts) apply their own font-display settings which may override yours.
Common Mistakes
Using font-display: block on body text
font-display: block hides text for up to 3 seconds. Use swap or optional for body copy — invisible text is never acceptable.
Preloading every font file
Only preload fonts used for above-the-fold text. Preloading unused font weights wastes bandwidth on first load.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement