Build a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Enter the font family name, file paths, weight, style, and font-display
We assemble a multi-format src list with the correct format() hints in the right order
Copy the resulting @font-face block straight into your stylesheet
0 bytes uploaded. @font-face CSS Generator runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
WOFF2 first (smallest, modern browsers stop here), then WOFF for older browsers, then TTF for IE. The browser walks the list in order and uses the first format it understands.
Yes. font-display: swap; is the safe default — the browser uses a fallback font during load, then swaps to the web font once loaded. Prevents invisible text and FOIT.
When you ship multiple language subsets. The browser only downloads the subset matching characters actually rendered on the page, saving bandwidth on mixed-script sites.
Generate the right <link rel="preload"> tags for above-the-fold web fonts. Cuts LCP by 100–500 ms by starting the font fetch alongside the HTML parse.
Open toolDecide between auto, block, swap, fallback, and optional. Get an explanation of each value's behaviour, recommended use cases, and copy-paste @font-face CSS.
Open toolPaste a Google Fonts URL or name and get a self-hosted @font-face CSS block plus a curl script for downloading every WOFF2. Privacy-friendly, GDPR-safe.
Open tool