How to <link rel=preload> attributes: complete font reference
- Step 1Start with the required pair: as + href — `as="font"` tells the browser the resource type so it can set the right priority and Accept header; `href` is the URL to fetch. Both are mandatory — a preload missing `as` is treated as a generic, low-priority fetch and won't earn font priority.
- Step 2Add type (the builder does this for you) — `type="font/woff2"` lets the browser skip the preload if it can't parse that format. The builder derives it from the URL extension (woff2/woff/otf, else font/ttf). If you preload an extensionless or query-stringed URL, fix the emitted `type` by hand.
- Step 3Always include crossorigin — Add the bare `crossorigin` keyword. Fonts are CORS-fetched, so without it the preloaded resource isn't matched to the `@font-face` fetch and the font downloads twice. The builder adds this unconditionally; never strip it.
- Step 4Optionally scope with media — `media="(min-width: 768px)"` preloads only when the query matches — useful for a desktop-only display font you don't want to push to phones. Not emitted by the builder; hand-add it to the generated tag.
- Step 5Optionally tune priority with fetchpriority — `fetchpriority="high"` forces the preload above the default (font preloads are already high), useful on pages crowded with high-priority resources. `fetchpriority="low"` deprioritises a non-critical preload. Hand-add as needed.
- Step 6Optionally lock the bytes with integrity — `integrity="sha384-..."` adds Subresource Integrity so a tampered/altered file is rejected. Generate the hash from the exact deployed bytes; a stale hash blocks the font entirely. Hand-add — the builder doesn't compute hashes.
Every preload attribute for fonts
Required = the preload won't work correctly without it. Emitted = whether the JAD preload builder includes it in generated tags.
| Attribute | Required for fonts? | Emitted by builder? | What it does |
|---|---|---|---|
rel="preload" | Yes | Yes | Declares this a preload hint for the current page |
as="font" | Yes | Yes | Sets resource type → correct priority, Accept header, and reuse matching |
href | Yes | Yes | The font URL to fetch (verbatim from your input) |
type | Effectively yes | Yes (derived from extension) | MIME hint so the browser can skip a format it can't parse |
crossorigin | Yes (always for fonts) | Yes (bare keyword) | Marks the fetch CORS/anonymous so it's reused by @font-face |
media | Optional | No — hand-add | Conditional preload by media query (e.g. desktop-only) |
fetchpriority | Optional | No — hand-add | Override the default priority (high/low/auto) |
integrity | Optional | No — hand-add | Subresource Integrity hash to verify the bytes |
type= values for font formats
The builder maps the URL's file extension to these values. Use the same values when hand-writing tags.
| Format | Extension | `type=` value |
|---|---|---|
| WOFF2 (preferred) | .woff2 | font/woff2 |
| WOFF | .woff | font/woff |
| OpenType | .otf | font/otf |
| TrueType (and the builder's fallback) | .ttf / anything else | font/ttf |
Browser support for the optional attributes
The required attributes are universally supported in all current engines. These optional ones have narrower or more recent support; degrade gracefully where unsupported.
| Attribute | Support | Fallback when unsupported |
|---|---|---|
media | Universal (all current engines) | n/a — safe everywhere |
fetchpriority | Chrome/Edge 102+, Safari 17.2+, Firefox 132+ | Attribute ignored; default priority applies |
integrity (on preload) | Honoured where SRI on <link> is supported; widely available in current Chromium/Firefox | Hash ignored; font still loads (no integrity check) |
Cookbook
The builder gives you the required-attribute tag; these examples show the optional attributes added by hand to that base. Start from a generated tag, then layer on what you need.
The base tag (what the builder emits)
ExampleFive attributes, type derived from the .woff2 extension, bare crossorigin. This is the full output for one URL — everything below is hand-added on top.
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-400.woff2" crossorigin>Desktop-only display font (media)
ExampleA heavy display font you only want above a breakpoint. media skips the preload on phones, saving their early-byte budget.
<link rel="preload" as="font" type="font/woff2"
href="/fonts/display.woff2" crossorigin
media="(min-width: 768px)">Force above competing preloads (fetchpriority)
ExampleOn a page with many high-priority resources, fetchpriority=high lifts the LCP font above the rest. Supported in Chrome/Edge 102+, Safari 17.2+, Firefox 132+; ignored elsewhere with no harm.
<link rel="preload" as="font" type="font/woff2"
href="/fonts/brand-display.woff2" crossorigin
fetchpriority="high">Subresource Integrity (integrity)
ExampleLock the preload to a known hash so a tampered or wrong file is rejected. Generate the hash from the EXACT deployed bytes — a mismatch blocks the font.
<link rel="preload" as="font" type="font/woff2"
href="/fonts/brand.woff2" crossorigin
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC">
<!-- compute: openssl dgst -sha384 -binary brand.woff2 | openssl base64 -A -->Everything together (rarely all at once)
ExampleAll optional attributes on one tag, for completeness. In practice you'd use one or two of these, not all three.
<link rel="preload" as="font" type="font/woff2"
href="/fonts/display.woff2" crossorigin
media="(min-width: 768px)"
fetchpriority="high"
integrity="sha384-...">Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
Omitting crossorigin on a font preload
Double fetch — wasted preloadFonts are always fetched in CORS (anonymous) mode by @font-face. A preload without crossorigin uses a different request mode, so the browser can't match the preloaded bytes to the font load and downloads the font twice. The bare crossorigin keyword equals crossorigin="anonymous" — exactly what's needed. The builder adds it unconditionally; don't remove it.
Wrong as= value (as="style" or none)
Mis-prioritised — preload ineffectiveas drives the priority, the Accept header, and reuse matching. as="font" is required; as="style" is for CSS and would request the font with the wrong semantics, while omitting as makes it a generic low-priority fetch that won't be reused by @font-face. Always as="font" for fonts.
Missing or wrong type= value
Hint may be skippedtype lets the browser drop a preload for a format it can't parse. A missing type usually still works but loses that safety; a *wrong* type (e.g. font/ttf on a WOFF2 because the URL had a ?v= query string) can cause the browser to skip the preload. The builder derives type from the extension, so fix the emitted value when the URL is extensionless or query-stringed.
fetchpriority on an unsupported browser
Ignored — gracefulfetchpriority is supported in Chrome/Edge 102+, Safari 17.2+, and Firefox 132+. Older browsers ignore the attribute and fall back to the default priority (which for font preloads is already high). It's safe to include — there's no penalty where it's unsupported.
Stale integrity hash after a font rebuild
Blocked — font won't loadintegrity rejects any file whose hash doesn't match. If you content-rebuild the font (new subset, new bytes) but keep the old hash, the browser blocks the font entirely with an integrity error. Recompute the hash from the deployed bytes on every build, or skip integrity for frequently-rebuilt fonts.
media query that never matches
By design — no preload firedmedia="(min-width: 768px)" means the preload simply doesn't fire below 768px — intended for conditional fonts. If you accidentally scope your *critical* LCP font behind a media query that doesn't match the device, the font isn't preloaded at all on those devices. Use media only for genuinely conditional fonts.
Adding media/fetchpriority/integrity and expecting the builder to keep them
By design — builder won't add themThe builder emits only rel, as, type, href, crossorigin. If you regenerate tags, any media/fetchpriority/integrity you hand-added are not reproduced — they're not part of the tool's output. Layer them on after generation, or template them in your build.
Quoting/value style of crossorigin
Supported — bare is correctcrossorigin (bare), crossorigin="", and crossorigin="anonymous" are equivalent for fonts. crossorigin="use-credentials" is different — it sends cookies and must match a @font-face that also uses credentials, which is unusual. The builder emits the bare keyword, which is the right default.
Frequently asked questions
Which attributes are strictly required?
rel="preload", as="font", and href. For fonts specifically, type and crossorigin are effectively required too: without type you lose format-skip safety, and without crossorigin the font is fetched twice. The builder emits all five.
Why must crossorigin be present even for same-origin fonts?
Because @font-face fetches fonts in CORS (anonymous) mode regardless of origin. The preload must use the same mode to be reused; otherwise the browser treats them as two different requests and downloads the font twice. The bare crossorigin keyword (= anonymous) matches the font fetch.
What does type= actually do?
It tells the browser the MIME type so it can skip the preload if it can't parse that format. It does NOT validate the bytes — a type="font/woff2" on a non-WOFF2 file won't be caught here. The builder derives type from the URL's file extension.
Does the builder emit media, fetchpriority, or integrity?
No. It emits rel, as, type, href, and crossorigin only. Add media, fetchpriority, or integrity by hand to the generated tag, or template them in your build. The examples above show each layered onto the base tag.
When should I use the media attribute?
For conditional fonts — e.g. a desktop-only display font you don't want to preload on phones: media="(min-width: 768px)". It's universally supported. Don't scope your critical LCP font behind a media query that might not match the device, or it won't preload there.
Does fetchpriority help for fonts?
Font preloads are already high priority by default, so fetchpriority="high" only helps when many high-priority resources compete and you want this font on top. fetchpriority="low" can deprioritise a non-critical preload. Support: Chrome/Edge 102+, Safari 17.2+, Firefox 132+; ignored (harmlessly) elsewhere.
How do I compute the integrity hash?
Hash the exact deployed font bytes, e.g. openssl dgst -sha384 -binary font.woff2 | openssl base64 -A, and use it as integrity="sha384-...". Recompute on every rebuild — a stale hash blocks the font entirely. For frequently-changing fonts, integrity is often more trouble than it's worth.
Is crossorigin="anonymous" different from bare crossorigin?
No — for fonts they're equivalent. Bare crossorigin, crossorigin="", and crossorigin="anonymous" all mean anonymous (no-credentials) CORS. The only meaningfully different value is crossorigin="use-credentials", which sends cookies and must match a credentialed @font-face — rarely needed.
What happens if I use as="style" by mistake?
The browser requests the resource as a stylesheet, with stylesheet priority and Accept headers, so a font preloaded with as="style" won't be matched to the @font-face font fetch and won't get font priority. Always use as="font" for fonts.
Does the order of attributes matter?
No — attribute order on an HTML element is not significant. The builder emits them in a readable order (rel as type href crossorigin), but you can reorder or reformat freely. What matters is presence and correct values, not order.
Can I preload a font with an integrity hash and a media query together?
Yes — attributes are independent. You can combine media, fetchpriority, and integrity on one preload tag (see the 'Everything together' example). In practice you'd rarely use all three; pick the ones your case needs and hand-add them to the generated base tag.
What's the difference between this reference and the preload/prefetch/preconnect guide?
This page is the attribute-level reference for a single <link rel="preload"> font tag. The preload vs prefetch vs preconnect guide is the higher-level decision of *which* resource hint to use for a given scenario. Use that guide to pick the hint, then this one to get its attributes right.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.