Performance

`perf/font-preload-crossorigin`

A font preload has crossorigin (and type font/woff2); without it the preload is wasted and the font is fetched twice.

moderatestaticfe-fonts

Why

Browsers always fetch fonts in CORS mode, even from your own origin. A <link rel="preload" as="font"> without crossorigin is a non-CORS request, so it does not match: the browser downloads the font a second time when the CSS asks for it, and the preload only stole bandwidth.

Fix

Add crossorigin (anonymous) and type="font/woff2": <link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>. Preload only the one or two fonts used in the first view; frameworks such as next/font and @nuxt/fonts write the tag for you.

Examples

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

Sources

Facts

Id: perf/font-preload-crossorigin
Severity: moderate
Check: static checked in the source by audit
Applies to: html angular vue svelte astro jsx
Taught by the skill: fe-fonts Web fonts
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/font-preload-crossorigin