FontFace: display property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note: This feature is available in Web Workers.
The display property of the FontFace interface determines how a font face is displayed based on whether and when it is downloaded and ready to use.
This property is equivalent to the CSS font-display descriptor.
When this property is used, font loading has a timeline with three periods. The lengths of the first two periods depend on the value of the property and the user agent. (See below.)
- block period
-
The browser invisibly prepares a fallback font. If the font face loads during this time, it's used to display the text and display is complete.
- swap period
-
If the font face is still not loaded, the fallback font will be shown. When the font face loads, the fallback will be swapped for the downloaded font.
- failure period
-
If the font face still is not loaded, the fallback font will be shown and no swap will occur.
Value
A string with one of the following values.
auto-
Use the font display strategy provided by the user agent.
block-
Gives the font face a short block period and an infinite swap period. The spec recommends 3 seconds for the block period, though this may vary from browser to browser.
fallback-
Gives the font face a short block period and a short swap period. The spec recommends 100 ms or less for the block period and 3 seconds for the swap period, though these values may vary from browser to browser.
optional-
Gives the font face a short block period and no swap period. The spec recommends 100 ms or less, though this may vary from browser to browser.
swap-
Gives the font face a 0 second block period and an infinite swap period.
Specifications
| Specification |
|---|
| CSS Font Loading Module Level 3 # dom-fontface-display |
Browser compatibility
BCD tables only load in the browser