font-display controls how a browser renders text while a web font loads and whether the web font later replaces the fallback. The property belongs inside an @font-face rule. section 12.5.1
Choose a value according to the visual and performance trade-off:
- auto uses the browser's default behavior, similar to block in most browsers. section 12.5.1
- block hides text briefly while the font loads, then falls back to unstyled text and replaces it if the web font arrives. section 12.5.1
- swap shows the fallback immediately and replaces it whenever the web font is ready, producing a FOUT. section 12.5.1
- fallback briefly hides text, uses the fallback if necessary, and later displays the web font when available. section 12.5.1
- optional resembles fallback but may leave the fallback in place when loading takes too long, especially on slower connections. section 12.5.1
Immediate fallback rendering
Place font-display: swap inside the @font-face rule. The browser displays the fallback font immediately, then swaps in the web font when it becomes available. A Google Fonts stylesheet can request this behavior with the &display=swap query parameter. section 12.5.1
