How to stop web fonts hiding text (font-display)
Browsers hide text for up to 3 s while a web font downloads. font-display swap shows a fallback immediately and swaps the real font when it arrives.
Step by step, with screenshots: font-display: swap, preload and self-hosting: web fonts without layout shift →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
font-display is a CSS setting in an @font-face rule that tells the browser what to show while a web font is still downloading. Without it, most browsers hide the text for up to 3 s, so visitors see empty headings and paragraphs until the font arrives.
font-display: swap shows the text immediately in a fallback font and switches to the web font when it loads; optional uses the web font only if it arrives within about 100 ms, which avoids both invisible text and layout shift. getReport flags font files loaded without a font-display value, the issue Lighthouse calls "Ensure text remains visible during webfont load". A page is OK when every @font-face rule sets swap, optional or fallback.
What a passing site looks like
- Web fonts show text while loadingwarning · −2 ptseffort S
Web fonts hide text while loading
Why it matters. Without font-display, browsers show blank text for up to 3 s while a web font downloads. Visitors stare at empty headings.
- Add font-display swap (or optional) to every @font-face rule.
- For Google Fonts, append &display=swap to the stylesheet URL; self-hosted fonts get it in the @font-face block.
- Preload the one or two fonts used above the fold.
Questions people ask
What are FOIT and FOUT?
FOIT, a flash of invisible text, is when the browser hides text until the web font loads, which most browsers do for up to 3 s by default. FOUT, a flash of unstyled text, is when the text appears in a fallback font first and then changes to the web font. font-display: swap chooses FOUT, which keeps content readable at the cost of a small reflow.
What does font-display: swap do?
It gives the web font an extremely short block period, so text renders at once in the next font in your font-family list, and it swaps in the web font whenever the file finishes loading. Visitors can start reading straight away. To reduce the jump when the swap happens, pick a fallback font with similar proportions or use size-adjust on a fallback @font-face rule.
How do I fix "Ensure text remains visible during webfont load" in WordPress?
Add font-display: swap to the theme's @font-face rules or, for Google Fonts, add &display=swap to the stylesheet URL. Many themes and performance plugins, such as WP Rocket, Perfmatters and OMGF, have a setting that does this for you, and some can host Google Fonts locally. Icon fonts such as Font Awesome often trigger the warning too, so check their CSS as well.