Preloading web fonts: Crawl Audit check 97

Short answer: browsers normally find out about a web font late, after reading the CSS that uses it. A <link rel="preload" as="font"> tells them to fetch it straight away, so text appears in the right font sooner. It's worth it for one or two key fonts, not all of them. Check 97 is low impact: it passes when fonts are preloaded, and warns when fonts are used but not preloaded.

What Crawl Audit checks

• Pass: a <link rel="preload" as="font"> in the page.
• Warning: the HTML shows web fonts (a Google Fonts link, a font stylesheet, or @font-face in the page) but nothing is preloaded.
• Pass: no custom fonts found.

One limit: Crawl Audit only reads the HTML. Fonts declared in a separate stylesheet aren't seen, so the check reports "no custom fonts" and passes. That's what happens on devmarde.com: our font is self-hosted in our CSS file and isn't preloaded, yet this check passes. We've reported it to the Crawl Audit team.

What Google says

• web.dev: preload "comes at the cost of taking away browser resources from the loading of other resources." It "should only be used to load a single font format."
• "Overuse of the preload directive may divert bandwidth from other critical resources."
• "you must specify the crossorigin attribute when preloading fonts, even if they're self-hosted."

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

On your platform

• Next.js: next/font self-hosts fonts and preloads them by default ("The default is true").
• WordPress: some themes and performance plugins add font preloads. Otherwise add the link in the theme's head.
• Shopify, Wix and Squarespace: the platform loads theme fonts. Custom fonts added by code are the ones to check.

Sources

• web.dev, Best practices for fonts and Optimize web fonts, checked 3 October 2026.
• Next.js, Font module.