Google Fonts blocking render: the font CSS squirrel flags

What font delivery costs

A <link rel="stylesheet"> to a hosted font service puts a cross-origin request in the critical path. The browser cannot paint until that stylesheet arrives, and it cannot even start fetching the font files until it has parsed it, so the text waits on two round trips to a host that is not yours.

Self-hosting the font files and their @font-face CSS removes the third-party request. Keeping the hosted CSS but loading it asynchronously removes the blocking, at the cost of a brief fallback font. An @import inside a <style> block is the worst of both: it blocks and it serialises, because the browser has to parse the inline CSS before it discovers the URL.

What squirrel checks

The rule runs on every crawled page and emits one check:

• font-delivery, at info status with the message No <head> element found when the page has no head.
• font-delivery, warning with the message N render-blocking third-party font stylesheet(s) in the critical path and listing each offending href as an item.
• font-delivery, passing with the message No render-blocking third-party font stylesheets.

Two things are scanned. In <head>, every link[rel~="stylesheet"] whose href resolves to one of eight font hosts counts, unless its media attribute, lowercased, is print, which is the asynchronous-load idiom. Anywhere in the document, every <style> element is searched for an @import of one of those hosts, reported as @import <url>; a print-only import is skipped, and not print is kept because it does apply to screen. layer(...) and supports(...) in the import’s conditions are not media, so layer(print) is not print-only. Only an import a browser would fetch counts: not one inside a comment or a string, and not one after another rule (only @charset and, before the first import, @layer statements may come before it), the same reading perf/critical-request-chains uses.

The eight hosts are fonts.googleapis.com, use.typekit.net, p.typekit.net, fast.fonts.net, fast.fonts.com, cloud.typography.com, fonts.bunny.net and use.fontawesome.com. A subdomain of any of them matches too. A page with no parsed document emits nothing at all.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

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

The media="print" value means the browser fetches the stylesheet without blocking paint, and the onload handler switches it on once it has arrived. Self-hosting the woff2 files and writing your own @font-face blocks removes the third-party request entirely and is the better fix where you can subset the font.

The common false positive is a font stylesheet that is genuinely wanted in the critical path, on a site where a fallback flash is unacceptable. The finding is still accurate about the cost.

Enable / disable

Disable this rule

[rules]
disable = ["perf/font-delivery"]

Disable all Performance rules

[rules]
disable = ["perf/*"]

Enable only this rule

[rules]
enable = ["perf/font-delivery"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• perf/font-loading: font-display and the Google Fonts preconnect.
• perf/render-blocking: every blocking resource in head, not just fonts.
• perf/preconnect: the connection setup for that font host.
• perf/critical-request-chains: the chained requests an @import creates.

Performance findings ship in every audit next to the SEO, security and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Best practices for fonts, web.dev
• @import, MDN
• The link element, HTML Standard

Check your site

Run squirrel audit https://example.com and open the Performance section of the report. Every blocking font stylesheet is listed with its URL. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.