Ensure text remains visible during webfont load

Fonts are often large files with slow load times. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT).

How the Lighthouse font-display audit fails

Lighthouse flags any font URLs that may flash invisible text:

A screenshot of the Lighthouse Ensure text remains visible during webfont loads audit

How to avoid showing invisible text

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)

Preload web fonts

Use <link rel="preload" as="font"> to fetch your font files earlier. Learn more:

Google Fonts

Add the &display=swap parameter to the end of your Google Fonts URL:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Browser support

Browser Support

  • 60
  • 79
  • 58
  • 11.1

Source

Stack-specific guidance

Drupal

Specify @font-display when defining custom fonts in your theme.

Magento

Specify @font-display when defining custom fonts.

Resources