what is font-display CSS feature?

Question

For my website, I am getting following feedback from Google's PageSpeed Insights: Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading. What does that mean?

Answer 1

CSS font-display allows you to control how web fonts are swapped with system fonts while/after they load. Lighthouse is telling you that you're loading a large amount of font data using @font-face so there will be lag (up to several seconds) where your content is blank while waiting for the fonts to load.

You can change this so that a fallback font (from your local system) loads right away and then gets swapped with your web fonts once they're loaded. (be aware that your fonts may have different sizes and cause things to jump around when they load).

Consider a structure like this:

@font-face {
  font-family: "Open Sans Regular";
  font-style: normal;
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

p {
  font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif;
}

font-display:swap; means when the page renders, all paragraph tags will use the FIRST AVAILABLE fallback font until Open Sans Regular has loaded. (In this case Helvetica on a Mac and Arial on Windows).

This gives you initial content on the screen in several milliseconds instead of potentially waiting several seconds for a font to load.

Answer 2

Also Preload web fonts Use to fetch your font files earlier.

Ensure text remains visible during webfont load