Skip to content

How to stop web fonts hiding text (font-display)

Speed1 min readFixes check 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: Elementor performance: asset loading, fonts and DOM size →

Check your own site

Runs this check and the other 186, free, in about 45 seconds.

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.

How to fix it.
  1. Add font-display swap (or optional) to every @font-face rule.
  2. For Google Fonts, append &display=swap to the stylesheet URL; self-hosted fonts get it in the @font-face block.
  3. Preload the one or two fonts used above the fold.

Filed under Speed & Core Web Vitals. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.