Font loading optimizationWhat it checks and how to fix it

What it checks

Detects web fonts loaded from third-party font services (Google Fonts, Adobe Typekit, Font Awesome, fonts.net), font files linked directly and @font-face rules in the page. Passes when the page uses no custom fonts, or when every @font-face declares font-display swap, optional or fallback and third-party font stylesheets come with a font preload; warns otherwise.

Why it matters

Without font-display, browsers hide text for up to three seconds while a web font downloads, so visitors stare at blank space where the content should be. Fonts from a third-party host also need an extra DNS lookup and connection before they even start downloading, which delays text and can shift the layout when the font finally swaps in.

How to fix it

Declare font-display on every @font-face so text renders immediately in a fallback font, and preload the one or two fonts used above the fold.

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

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

With Google Fonts, add &display=swap to the stylesheet URL and open the connection early:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap">

Self-hosting the font files removes the third-party connection altogether.