Font Display

• Defines how font files are loaded and displayed by the browser.
• It is applied to the @font-facerule which defines custom fonts in a stylesheet.

Values

• auto (default): Allows the browser to use its default method for loading.
• block:
  • Instructs the browser to briefly hide the text until the font has fully downloaded. More accurately, the browser draws the text with an invisible placeholder then swaps it with the custom font face as soon as it loads. This is also known as a “flash of invisible text” or FOIT.
  • Block period: short, Swap period: infinite.
• swap:
  • Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
  • Block period: none, Swap period: infinite.
• fallback: The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text. It will swap to the new font after it is downloaded, but only during a short swap period (probably 3 seconds).
  • Block period: Extremely Short, Swap period: Short.
• optional:
  • Block period: Extremely Short, Swap period: None.

@font-face {
  font-family: 'customfont';
  src:  url('customfont.woff2');
  font-display: fallback;
}