CSS font-display Property

The font-display property defines how font files are downloaded and displayed by the browser. This property has the following values:

  • auto
  • block
  • swap
  • fallback
  • optional

The font-display property tells the browser whether FOUT (flash of unstyled text) or FOIT (flash of invisible text) is preferred.

Initial Value auto
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.fontDisplay = "swap";

Syntax

front-display: auto | block | swap | fallback | optional | initial | inherit;
@font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src:  url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Define where the font can be downlaoded */
font-display: fallback; /* Define how the browser behaves during download */
}

Values

Value Description
auto Font display is defined by the browser.
block Briefly hides the text until the font has fully downloaded.
swap Gives the font face a very small block period and an infinite swap period.
fallback Gives the font face a very small block period and a short swap period.
optional Gives the font face a very small block period and no swap period.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

60.0+ x x 58.0+ 11.1+ 47.0+




Related articles