font-display
A descriptor of `@font-face` (not an ordinary property): decides what the text looks like while the web font is still loading.
Syntax
@font-face { font-display: swap; }Values
| Parameter | Type | Description |
|---|---|---|
| swap | keyword | Show text in a fallback font at once, switch to the web font when it arrives. |
| optional | keyword | Use the web font only if it loads almost instantly, otherwise keep the fallback for this visit. |
| fallback | keyword | A middle way: a very short invisible period, then the fallback; a late font may still be swapped in for a few seconds. |
| block | keyword | Hide the text for up to about 3 seconds while waiting for the font. |
| auto | keyword | The default: the browser decides, usually like `block`. |
Examples
A brand font that never hides the text:
<style>
@font-face {
font-family: "Brand";
src: local("Georgia"), local("Times New Roman");
font-display: swap;
}
h2 { font-family: "Brand", serif; }
</style>
<h2>The heading is readable immediately</h2>Notes
font-display works only inside @font-face; on a normal selector it is ignored. swap is the usual choice for body and heading fonts; optional gives the most stable layout and suits decorative fonts. Google Fonts adds it with the &display=swap parameter in the stylesheet address.
See also
- @font-face — Loads a font and gives it a name to use in `font-family`.
- font-family — The font family, with a list of fallbacks.
- <link> — Links an external resource to the page: a stylesheet, the site icon, a font.
Related recipes
In the tutorial
- Web fonts — How to use your own font — the @font-face rule, the woff2 format, font-display, variable fonts, Google Fonts with preconnect, fallback fonts and choosing between self-hosting and a CDN.