# 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.

Speed & Core Web Vitals · HTML version: https://getreport.app/learn/font-display

## Web font text visibility

Passing looks like: Web fonts show 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.

Check your own page: https://getreport.app/