what is font-display CSS feature?

css sass web-frontend
Mojo picture Mojo · Apr 14, 2019 · Viewed 14.3k times · Source

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

Bryce Howitson picture Bryce Howitson · Apr 14, 2019

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.

Related questions

What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More
Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my …

Read More
Import regular CSS file in SCSS file?

Is there anyway to import a regular CSS file with Sass's @import command? While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to be able to use …

Read More