This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 swaped 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.
Syntax
var display = FontFace.display FontFace.display = display
Value
A CSSOMString
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 | Status | Comment |
---|---|---|
CSS Font Loading Module Level 3 The definition of 'display' in that specification. |
Working Draft | Initial definition. |
CSS Fonts Module Level 4 The definition of 'font-display' in that specification. |
Working Draft | Defines the values for the display property. (They are the same as for font-display .) |
Browser Compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
display | Chrome Full support 60 | Edge Full support 79 | Firefox Full support 58 | IE ? | Opera Full support 47 | Safari Full support 11 | WebView Android Full support 60 | Chrome Android Full support 60 | Firefox Android No support No | Opera Android Full support 44 | Safari iOS No support No | Samsung Internet Android Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.