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:

# 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:

• Preload web fonts to improve loading speed (codelab)
• Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts

# 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

It's worth mentioning that not all major browsers support font-display: swap, so you may need to do a bit more work to fix the invisible text problem.

# Stack-specific guidance

# Drupal

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

# Magento

Specify @font-display when defining custom fonts.

# Resources

• Source code for Ensure text remains visible during webfont load audit
• Avoid invisible text during loading
• Controlling font performance with font displays
• Preload web fonts to improve loading speed (codelab)
• Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts