Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. General
  4. How to add font-display:swap to your Google Fonts

How to add font-display:swap to your Google Fonts

By default, Google Fonts are render-blocking and might take a while to load. The problem is that most modern browsers hide the text until the font is fully loaded. This creates a flash of invisible text (FOIT). Lighthouse flags any FOIT issues with the following warning: 

Ensure text remains visible during webfont load:
Lighthouse was unable to automatically check the `font-display` values for the origin

Ensure text remains visible during webfont load warning in Lighthouse
Ensure text remains visible during webfont load warning in Lighthouse

Google recommends that you use a property called font-display. In this example, we’re using the “swap” value which defaults back to system fonts temporarily until your Google Fonts have finished loading. This fixes the invisible text problem and is supported in all modern browsers.

How to add font-display:swap using Perfmatters

Perfmatters makes it easy to add font-display:swap to your Google Fonts. Follow the steps below.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Click on the “Fonts” submenu.

Perfmatters fonts
Perfmatters fonts

Step 3

Toggle on “Display Swap.” This will append display=swap to the end of your Google Fonts stylesheet in your HTML.

Font-display:swap option in Perfmatters
Font-display:swap option in Perfmatters

Example before


Example after


We also recommend hosting your Google Fonts locally. You can toggle on “Local Google Fonts” in Perfmatters. When “Display Swap” is also toggled on, your new local stylesheet will get font-display:swap; added to it.

Step 5

Scroll down and click “Save Changes.”

Adobe Fonts (Typekit)

The above feature only works with Google Fonts. However, if you’re using Adobe Fonts, you can add “swap” by updating your web project.


Display swap is a great way to resolve FOIT issues and the PageSpeed Insights warning. However, it can sometimes create CLS, as system fonts might be slightly bigger or smaller when the switch happens to Google Fonts. This will depend on how your site is structured. To resolve CLS issues, you can do a couple of things.

  1. You can preload your Google Fonts in Perfmatters.
  2. You can use size-adjust for @font-face. This will require a developer and changes to your site’s code.
Was this article helpful?

Related Articles