The invisible text problem
When a page uses a custom web font, the browser must download it before painting the styled text. By default some browsers hide the text until the font arrives, leaving a blank gap. The font display descriptor decides what happens during that wait.
- A blocking period hides text briefly while the font loads.
- A swap period shows a fallback font, then swaps when ready.
- The choice trades a flash of nothing for a flash of restyling.
The display strategies
The descriptor offers several behaviors with different balances.
- swap shows fallback text immediately, then swaps to the web font.
- block briefly hides text, risking invisible text on slow loads.
- fallback gives a tiny block then sticks with the fallback if late.
- optional may skip the web font entirely on a slow connection.
Choosing swap and softening it
Swap keeps content readable from the start, which usually wins. To reduce the jarring restyle, match the fallback font's size and spacing to the web font so the swap moves text as little as possible.
Key idea
The font display swap shows readable fallback text immediately and swaps in the web font later, trading invisible text for a controlled restyle.