Font-display
The CSS font-display descriptor controls how text is rendered while a web font loads or is unavailable.
CSS in Depth, Second Edition
The CSS font-display property controls how a browser renders text while a web font is loading and whether it later replaces the fallback font.
- How it is used
- Controls the page's initial text rendering while web fonts load.
- How deep it goes
- Explains five loading behaviors and their connection to FOIT, FOUT, connection speed, and design importance.
- Examples
- Uses Google Fonts stylesheets and the &display=swap query parameter as configuration examples.
- What you can do after
- Apply it via CSS by selecting a loading strategy inside an @font-face rule.
Read how CSS in Depth, Second Edition explains font-display →
Tiny CSS Projects
font-display is an @font-face descriptor that controls how text is rendered while a web font is loading or unavailable.
- How it is used
- Controls whether text and interface content remain available while web fonts load.
- How deep it goes
- Defines swap behavior and its loading consequence, but does not compare other font-display values.
- Examples
- Uses Open Sans variable and italic @font-face declarations with font-display: swap.
- What you can do after
- Apply it via CSS to keep content usable while specified fonts load.
Related concepts
- web fontconfigures · A web font is a font resource delivered through the web for rendering text in web pages or applications without requiring local installation.
- @font-facepart of · The CSS @font-face at-rule defines a font resource and descriptors that associate it with a font family and style.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.