How to why @font-face format() hints matter
- Step 1Standard hints — format("woff2") for WOFF2. format("woff") for WOFF. format("truetype") for TTF (note: 'truetype' not 'ttf'). format("opentype") for OTF/CFF.
- Step 2Variable font hints — format("woff2-variations") for variable WOFF2. format("woff2 supports variations") modern syntax. format("woff2 supports color-COLRv1") for chromatic.
- Step 3Apply consistently — Every src URL needs a format hint. The @font-face Generator emits these correctly; hand-written declarations often forget.
Frequently asked questions
What if I omit format hints?+
The browser tries each src in order, downloading and parsing each one until it finds a supported format. Wastes bandwidth — always include format() hints.
Are hint strings case-sensitive?+
No, but conventionally lowercase. format("WOFF2") and format("woff2") work identically; lowercase is the standard convention.
What about deprecated EOT?+
format("embedded-opentype") was the EOT hint. EOT is dead (IE6–8 only); skip the hint and the file. The @font-face Generator doesn't offer EOT for this reason.
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.