How to generate production-ready @font-face css
- Step 1Enter the font family name — The CSS font-family identifier. Doesn't have to match the font's internal name — pick something that fits your design system convention.
- Step 2Set base path and weight — Base path (e.g., /fonts/inter) plus the format extensions enabled. Weight (100–900). Style (normal/italic). font-display value (swap is the safe default).
- Step 3Copy the output — Output is a complete @font-face block with src list, weight, style, font-display, and optional unicode-range. Paste into your CSS.
Frequently asked questions
What's the right src order?+
WOFF2 first (modern browsers stop here), then WOFF for older browsers, then TTF for IE. Order matters — wrong order means modern browsers download the largest format unnecessarily.
Should I always include font-display?+
Yes. font-display: swap is the safe default — fallback during load, swap to web font when ready. Prevents invisible text and FOIT.
When should I use unicode-range?+
When shipping multiple language subsets. Browser only downloads subsets matching characters actually rendered. Critical for multilingual sites; unnecessary for single-language sites.
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.