FontFace.display

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
display
Experimental
Chrome Full support 60Edge Full support 79Firefox Full support 58IE ? Opera Full support 47Safari Full support 11WebView Android Full support 60Chrome Android Full support 60Firefox Android No support NoOpera Android Full support 44Safari iOS No support NoSamsung 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.