How to what format() hints do, and the exact strings to use
- Step 1Understand what the hint is for — The hint lets the browser pre-filter the `src` list. Given `url(a.woff2) format("woff2"), url(a.woff) format("woff")`, an engine without WOFF2 support jumps straight to the WOFF without fetching the WOFF2. Without hints, it would have to download and sniff each file in turn.
- Step 2Use the spec-correct strings — `woff2` for WOFF2, `woff` for WOFF, `truetype` for TTF, `opentype` for OTF/CFF. Note the two traps: it's `truetype` not `ttf`, and `opentype` not `otf`. The wrong strings aren't errors — they're just unrecognised, so the browser may skip a usable source.
- Step 3Know what the generator emits — Tick WOFF2 → `format("woff2")`. Tick WOFF → `format("woff")`. Tick TTF → `format("truetype")`. Those are the only three strings the [@font-face Generator](/font-tools/font-face-generator) produces, in that order. There's no OTF, variation, or EOT checkbox.
- Step 4Add variation/chromatic hints by hand if needed — For a variable WOFF2 you may want `format("woff2-variations")` (older syntax) or `format("woff2 supports variations")` (modern). For COLRv1 colour fonts, `format("woff2 supports color-COLRv1")`. The generator doesn't write these — append them yourself if your fallback strategy needs them.
- Step 5Drop EOT and SVG entirely — `format("embedded-opentype")` (EOT, IE6–8) and `format("svg")` (SVG fonts, never properly supported) are obsolete. Don't ship the files or the hints. The generator offers neither, by design.
- Step 6Verify the fallback actually degrades correctly — After generating, eyeball the list order (WOFF2 first) and confirm each URL's extension matches its hint. A hint that disagrees with the file (e.g. a `.ttf` URL tagged `format("woff")`) is a silent bug the browser may act on by skipping a usable file.
Every format() hint string
The spec format strings, the file type each maps to, and whether the @font-face Generator emits it. Browser support is current as of 2026.
| Hint string | File type | Generator emits it? | Status today |
|---|---|---|---|
format("woff2") | WOFF 2.0 | Yes (WOFF2 checkbox) | Ship this first — ~99% support |
format("woff") | WOFF 1.0 | Yes (WOFF checkbox) | Fallback for IE9–11 / no-Brotli engines |
format("truetype") | TTF | Yes (TTF checkbox) | Legacy fallback only; not for modern web |
format("opentype") | OTF / CFF | No | Valid but rare on web — convert to WOFF2 instead |
format("woff2-variations") | Variable WOFF2 (older syntax) | No | Superseded by supports variations; add by hand |
format("woff2 supports variations") | Variable WOFF2 (modern) | No | Modern variable-font hint; add by hand |
format("woff2 supports color-COLRv1") | Chromatic WOFF2 (COLRv1) | No | Colour-font targeting; add by hand |
format("embedded-opentype") | EOT | No | Dead (IE6–8) — do not ship |
format("svg") | SVG font | No | Dead — never properly supported; do not ship |
Right string vs the common wrong string
The three mistakes that look plausible but break the hint. Browsers don't error on these — they just may skip the source.
| You might write | Correct string | What the browser does with the wrong one |
|---|---|---|
format("ttf") | format("truetype") | Unrecognised hint — may skip the source even though it's TTF |
format("otf") | format("opentype") | Unrecognised hint — may skip a usable OTF |
format("woff-2") / format("WOFF2") | format("woff2") | Hyphenated form is wrong; casing is tolerated but lowercase is the convention |
Cookbook
Before/after src lists showing the hint mistake and the corrected version the generator produces. Each pair is real CSS.
The `ttf` vs `truetype` trap
ExampleA hand-written list tags the TrueType file format("ttf"). The string is undefined, so a browser that fell back this far may skip it. The generator emits truetype for the same checkbox.
Wrong (hand-written):
src: url("/f/x.woff2") format("woff2"),
url("/f/x.ttf") format("ttf"); /* skipped */
Right (generator, TTF checkbox ticked):
src: url("/f/x.woff2") format("woff2"),
url("/f/x.ttf") format("truetype");Omitting hints forces speculative downloads
ExampleWith no hints, a browser can't pre-filter — it fetches sources in order and sniffs each until one works. On a multi-format list that can mean downloading a format you can't use before reaching the one you can.
No hints:
src: url("/f/x.woff2"),
url("/f/x.woff");
/* browser may fetch + sniff each file in turn */
With hints (what the generator writes):
src: url("/f/x.woff2") format("woff2"),
url("/f/x.woff") format("woff");
/* engine skips unsupported formats without downloading */OTF on the web — the generator can't tag it
ExampleThere's no OTF checkbox, so if you reference a raw .otf you must hand-write format("opentype"). The better move is to convert the OTF to WOFF2 first and let the generator handle the hint.
If you must reference OTF directly (hand-written):
src: url("/f/x.otf") format("opentype");
Preferred — convert then generate:
1. Run /font-tools/ttf-to-woff2 on the .otf
2. Generate with WOFF2 ticked →
src: url("/f/x.woff2") format("woff2");Variable font — add the variations hint yourself
ExampleThe generator writes plain format("woff2") even for a variable WOFF2. If your fallback chain serves a static font to engines without variable support, append the modern variation hint by hand so they're distinguished.
Generator output (variable WOFF2):
src: url("/f/x.var.woff2") format("woff2");
Hand-edited for an explicit variable-aware chain:
src: url("/f/x.var.woff2") format("woff2 supports variations"),
url("/f/x.static.woff2") format("woff2");The full legacy chain — and what to drop
ExampleAn old 2014-era bulletproof list. Keep WOFF2 + WOFF; the generator can produce both. Drop EOT and SVG — the generator never offered them and nothing modern needs them.
2014 'bulletproof' (over-engineered today):
src: url("x.eot");
src: url("x.eot?#iefix") format("embedded-opentype"),
url("x.woff2") format("woff2"),
url("x.woff") format("woff"),
url("x.ttf") format("truetype"),
url("x.svg#x") format("svg");
2026 (generator: WOFF2 + WOFF ticked):
src: url("x.woff2") format("woff2"),
url("x.woff") format("woff");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.
format("ttf") in a hand-written list
invalid hintttf is not a defined format string. The source isn't an error, but browsers may treat the hint as unrecognised and skip the file. Use truetype — which is what the generator's TTF checkbox emits, so generating instead of hand-writing avoids the trap entirely.
No format() hints at all
wastefulLegal CSS, but it disables the browser's pre-filter. On a multi-format src list the browser may download and sniff a file it can't use before reaching the one it can. The generator always attaches a hint to every URL, so its output never has this problem.
Hint disagrees with the actual file
silent skipTagging a .woff URL format("woff2") (or vice versa) can make the browser skip a perfectly usable file because the hint says it's something the engine doesn't support. The generator derives the hint from the checkbox and the extension from the same checkbox, so the two always agree.
Expecting an `opentype` hint from the tool
Not emittedThere's no OTF checkbox; the generator only writes woff2, woff, and truetype. If you need opentype, hand-add it — but the right move for the web is to convert the OTF to WOFF2 with TTF/OTF to WOFF2 and let the WOFF2 checkbox handle the hint.
Expecting a variable-font hint from the tool
Not emittedThe generator outputs plain format("woff2") for any WOFF2, including variable ones — which is fine for most setups since variable WOFF2 is still WOFF2. The woff2 supports variations and woff2-variations hints are only needed when your src list also offers a static fallback to non-variable engines; add them by hand.
Case in the hint string (WOFF2 vs woff2)
ToleratedHint strings are matched case-insensitively, so format("WOFF2") and format("woff2") behave identically. Lowercase is the universal convention, and the generator always writes lowercase. Don't rely on casing to carry meaning.
embedded-opentype (EOT) hint present
obsoleteEOT only ever served IE6–8, all long dead. The format("embedded-opentype") hint (and the .eot file) are pure bloat in 2026. The generator never offers them; if you're maintaining old CSS, strip the EOT source entirely.
svg font hint present
obsoleteformat("svg") referenced the SVG-font format, which only WebKit ever partially supported and which is now removed from browsers. It's dead. The generator doesn't offer it; remove any .svg#id source you find.
Hint correct but file 404s
Check the pathA perfect hint can't save a missing file. If format("woff2") points at a URL that returns 404 (or a wrong MIME type), the browser falls through to the next source or to the system fallback. The hint only governs format selection, not file availability — verify the deployed paths.
Frequently asked questions
What does a format() hint actually do?
It tells the browser which file type each src URL points to so the browser can skip formats it can't render without downloading them first. On a multi-format src list, hints let a WOFF2-capable browser stop at the WOFF2 and an old engine jump straight to the WOFF, with no wasted requests.
Is it `ttf` or `truetype`?
truetype. The spec's format string for TTF is truetype; format("ttf") is undefined and browsers may ignore that source. This is the single most common hand-written mistake, which is why the @font-face Generator emits format("truetype") for its TTF checkbox automatically.
Which hints does the @font-face Generator emit?
Exactly three: woff2, woff, and truetype, one per format checkbox, in that order. It does not emit opentype, the variation hints (woff2-variations, woff2 supports variations), embedded-opentype, or svg. If you need any of those, add them by hand after generating.
What happens if I omit the format() hints entirely?
The CSS is still valid, but the browser loses its ability to pre-filter the list. It may download and sniff each source in turn until one works, which wastes bandwidth on multi-format lists. The generator always attaches a hint to every URL, so its output never has this issue.
Are hint strings case-sensitive?
No — format("WOFF2") and format("woff2") are matched the same way. But lowercase is the universal convention and the generator always writes lowercase. Don't use casing to encode anything; it carries no meaning.
What hint do I use for an OTF file?
format("opentype"). Note it's opentype, not otf — the latter is undefined. The generator has no OTF checkbox, so you'd add this by hand. For the web, though, converting the OTF to WOFF2 with TTF/OTF to WOFF2 and using the WOFF2 hint is the better path.
How do I hint a variable font?
Plain format("woff2") works for a variable WOFF2 because it's still a WOFF2 file. The dedicated hints — format("woff2 supports variations") (modern) or the older format("woff2-variations") — are only needed when your src list also offers a static fallback that non-variable engines should pick instead. The generator writes the plain woff2 hint; add the variation hint by hand if your chain needs it. To produce static instances for that fallback, use the Variable Font Freezer.
What about format("embedded-opentype") for IE?
That's the EOT hint for IE6–8, all of which are dead. Don't ship the .eot file or the hint — it's wasted bytes. The generator never offered EOT for exactly this reason. The realistic legacy floor today is IE9–11, which take a WOFF (format("woff")) fallback.
Does the hint guarantee the font loads?
No. The hint only controls which source the browser picks by format. If that URL 404s or is served with the wrong MIME type, the font still fails and the browser falls through to the next source or the system fallback. Always verify the files exist at the paths in your generated block.
Can a wrong hint break a working font?
Yes, subtly. If a hint disagrees with the file — say a .woff URL tagged format("woff2") — the browser may skip a usable file because the hint claims a format it doesn't support. Generating instead of hand-writing avoids this: the generator derives both the URL extension and the hint from the same checkbox, so they always match.
Should I still write the full five-format bulletproof list?
No. The 2014 EOT + WOFF2 + WOFF + TTF + SVG list is over-engineered for 2026. WOFF2 covers ~99% of traffic; add WOFF only for IE9–11 or no-Brotli embedded WebViews. The generator's WOFF2 + WOFF checkboxes produce the modern equivalent. See best practices for 2026.
Where can I see the exact block these hints belong in?
Generate it with the @font-face Generator — tick the formats you need and it assembles the src list with correct hints and ordering. The online generator how-to walks every field, and the descriptors reference covers the rest of the block.
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.