font-display swap for fonts: Crawl Audit check 98

Short answer: while a web font downloads, browsers can hide your text, for up to 3 seconds in Chrome and Firefox. font-display: swap tells them to show the text straight away in a fallback font, then swap in yours. Check 98 is low impact: it passes when swap is used, and warns when web fonts are used without it.

What Crawl Audit checks

• Pass: font-display: swap in the page, or a Google Fonts link with display=swap.
• Warning: web fonts found in the HTML without it.
• Pass: no custom fonts found.

Like check 97, it only reads the HTML. Fonts declared in a separate stylesheet aren't seen, so the check passes as "no custom fonts". On devmarde.com it passes that way, though our stylesheet does use font-display:swap.

What Google says

• web.dev: "By default, Chromium-based and Firefox browsers block text rendering for up to 3 seconds if the associated web font has not loaded. Safari blocks text rendering indefinitely."
• "Quickly display text and still use a web-font: Use font-display: swap but make sure to deliver the font early enough that it does not cause a layout shift."
• "swap is the most widely used font-display value."
• MDN: swap "Gives the font face an extremely small block period and an infinite swap period." optional uses the font only if it arrives almost at once.

The trade-off: swapping fonts can shift text (check 74). Pick a fallback font of similar size, and preload the main font (check 97).

How to add it

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

• Google Fonts: add &display=swap to the stylesheet address, as in https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap.
• Next.js: next/font uses swap by default.
• WordPress, Shopify, Wix and Squarespace: check fonts added through custom code. Theme fonts are loaded by the theme or platform.

Sources

• web.dev, Best practices for fonts and Optimize web fonts, checked 3 October 2026.
• MDN, font-display; Google Fonts, CSS API; Next.js, Font module.