19

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?

Mojo
  • 498
  • 1
  • 8
  • 16
  • 1
    Here is an article you might find answers your question https://css-tricks.com/font-display-masses – Jakob E Apr 15 '19 at 07:55

3 Answers3

28

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.

Bryce Howitson
  • 7,339
  • 18
  • 40
  • What happens if you don't use `font-display: swap`? It seems to like it will behave the same way. – adi518 Sep 08 '19 at 15:45
  • 5
    The question is about how to improve Google Lighthouse score. It's best practice to have content on the screen as soon as possible and font-display: swap accomplishes that. – Bryce Howitson Sep 08 '19 at 15:53
2

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

Ensure text remains visible during webfont load

Sabry Suleiman
  • 182
  • 9
-9

Font Feature is a technique to use advanced text styles and effects as designed by the font developer. A font may support a number of features: some examples include different kinds of ligatures, tabular numbers, or small caps.This picture explain much better enter image description here

You can solve this issue by using @fontface or you can also try different setting of font-display.

MIH
  • 125
  • 1
  • 14
  • This answer doesn't address what `font-display` does as it relates to page speed and loading of `@font-face`. A copy & paste from a Google search doesn't really help improve the community's knowledge... – Bryce Howitson Apr 14 '19 at 16:37