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.