Skip to content

lcp.preload font cors mismatch

Jump to bottom
github-actions[bot] edited this page Sep 6, 2026 · 1 revision

lcp.preload-font-cors-mismatch

Rule ID: lcp.preload-font-cors-mismatch Severity: ERROR Category: lcp Target Standards: W3C Preload Specification (Font Preload CORS Requirements), HTML Living Standard Crossorigin Attribute Specification, Google Chrome Core Web Vitals (Largest Contentful Paint Resource Optimization)

1. Overview & Core Invariant

Font preload '' lacks 'crossorigin' attribute, triggering browser cache discard and double network downloads

Core Invariant:

"All '' tags must specify the 'crossorigin' attribute to ensure the preloaded font binary is accepted by the browser font cache."

2. Technical Grounding & Engine Realities

The W3C CSS Fonts specification mandates that web fonts must be fetched using anonymous Cross-Origin Resource Sharing (CORS) mode, even when the font is hosted on the same origin as the page.

When a '' tag omits the 'crossorigin' attribute, the preload scanner fetches the font using standard non-CORS mode.

When the CSS parser subsequently requests the font in anonymous CORS mode, the browser detects a CORS mode mismatch, discards the preloaded resource from cache, and executes a second, redundant network download.

Adding 'crossorigin' (or 'crossorigin="anonymous"') ensures the preloaded font matches the CSS font engine request key, avoiding double downloads.

3. Vulnerability & Risk Taxonomy

Risk Vector Severity Impact
Redundant Network Double Download CRITICAL The font asset is downloaded twice over the network, completely defeating the purpose of preloading and inflating bandwidth usage.
LCP Text Rendering Delay HIGH The second fetch is queued after CSS parsing, adding hundreds of milliseconds to text block paint times.

4. Non-Compliant Code Patterns (Bad Examples)

HTML (Font preloaded without crossorigin attribute triggering cache discard):

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

5. Compliant Implementation Patterns (Good Examples)

HTML (Font preload declared with crossorigin attribute matching W3C anonymous CORS requirement):

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

6. How to Suppress (Ignore Directives)

If this pattern is required for an intentional exception, suppress the diagnostic using the canonical Charites Rule ID:

<!-- charites:ignore lcp.preload-font-cors-mismatch intentional exception -->
// charites:ignore lcp.preload-font-cors-mismatch intentional exception

7. Configuration Reference (charites.yaml)

rules:
  lcp.preload-font-cors-mismatch:
    severity: error # error | warn | info | off

8. Architectural Domain & Verification Reference

Charites Wiki

Rule Categories

A11y (16 rules)
Browser (12 rules)
Cls (16 rules)
Design (1 rules)
Ergonomy (5 rules)
Inp (16 rules)
Lcp (16 rules)
Mobile (5 rules)
Performance (16 rules)
Pwa (10 rules)
Responsive (18 rules)
Semantic (1 rules)
Theme (32 rules)
Ux (20 rules)

Clone this wiki locally