[CSS 3] Font Strategies

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

auto
The font display strategy is defined by the user agent.

block
Gives the font face a short block period and an infinite swap period.

swap
Gives the font face an extremely small block period and an infinite swap period.

fallback
Gives the font face an extremely small block period and a short swap period.

optional
Gives the font face an extremely small block period and no swap period.

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format("woff"), url(/path/to/fonts/examplefont.eot)
      format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

 

 

block:

swap:

fallback:

optional: