Create account
PerformanceChecked through WebDiag API

Font Loading Analyzer

WebDiag parses inline and bounded external CSS, collects @font-face rules and font URLs, correlates font preloads, and safely checks a bounded set of font response headers.

  • @font-face inventory
  • Preload correlation
  • Up to 24 font assets
Online tool

Try the tool

Enter a URL: WebDiag will run a safe network check and show the result.

Page URL

Network check through backend

For HTTP/SEO tools, the URL is sent to the WebDiag API, where SSRF protection, DNS/IP policy, and redirect limits are applied.

Reviewed: 2026-07-17
01

How to use it

  1. 1

    Paste a public page URL.

  2. 2

    WebDiag checks inline CSS and up to 12 external stylesheets for @font-face rules.

  3. 3

    Review font-display, families, sources, WOFF2 signals, matched preloads, bytes, and cache headers.

02

What the tool can do

  • Parses family, style, weight, font-display, local(), and URL sources.
  • Correlates link rel=preload as=font with discovered @font-face URLs.
  • Checks font MIME, Content-Length, cache policy, redirects, and public-target safety.
03

Common use cases

  • Find @font-face rules without an explicit font-display.
  • Find preload URLs that do not match static CSS sources.
  • Review family/weight counts and known declared font bytes.
04

How it works inside

The CSS parser is bounded and does not execute JavaScript-generated stylesheets or the runtime CSSOM.

Not every font should be preloaded: the tool checks consistency of existing preloads rather than requiring a preload for every file.

05

Questions and answers

Which font-display value is best?

There is no universal answer. The tool surfaces missing values or block, but choosing swap, optional, fallback, or another behavior depends on the product and metrics.

Why is a missing preload not treated as an error?

Preload is useful only for a limited set of critical fonts. Preloading everything can compete with other resources.