How web fonts load fast

How it works

A web font is included in the stylesheet with an @font-face rule. The browser only loads the file when it wants to draw text in that font. Until it arrives, most browsers hide the text for up to three seconds. Visitors then see a page without text.

The font-display property changes that. With swap, the text appears straight away in a fallback font and switches as soon as the web font has loaded.

bytereport reads the @font-face rules of the stylesheets the HTML includes and warns if one of them has no font-display. The details also list the font files with their size.

What matters

• font-display: swap; in every rule.
• WOFF2 only. Every current browser understands the format, and it is the smallest. You can drop older formats such as TTF or EOT.
• Only the weights you use. Every weight and every italic is a file of its own. Two or three are often enough. A subset of characters, Latin only for example, makes the files smaller.
• From your own domain. Fonts from a foreign server cost an extra connection. With Google Fonts, your visitors' IP address also goes to Google, see external content.
• Preload the most important font. With preload the browser starts earlier instead of waiting for the stylesheet first.
• A fallback font that is as similar as possible. If its width differs a lot, the text jumps when the fonts switch, see CLS.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

For fonts, the crossorigin attribute is needed even when they come from your own domain.

How to set it up

The @font-face rules live in the theme's stylesheet; add font-display there or have your agency do it. If you include Google Fonts through their address, adding &display=swap takes care of it. Many CMSs have plugins that move fonts onto your own server.