@font-face CSS Generator
Drop a web font and get correct, modern @font-face CSS (woff2 with woff fallback, font-display, weight/style) plus a system fallback stack — free, 100% in your browser.
100% private — your font never leaves your browser. Safe for licensed or unreleased fonts.
Modern browsers only need woff2 (with woff as a safety net) — the old eot/ttf/svg bloat is obsolete. Your font is read locally and never uploaded. Confirm your font licence permits web embedding.
How to use the @font-face CSS Generator
- Drop your web font (woff2 recommended).
- Set family name, weight, style and font-display.
- Pick a fallback stack.
- Copy the modern @font-face CSS.
What you can use it for
- Self-host a web font with correct @font-face CSS
- Emit lean woff2 + woff syntax (no legacy bloat)
- Set font-display to control loading behaviour
- Get a ready system fallback stack
More free tools
Working with web fonts?
Convert, inspect and optimise fonts with our free in-browser typography tools — nothing uploaded.
See all free font tools →Frequently asked questions
Do I still need eot, ttf and svg font formats?
No — modern browsers only need woff2, with woff as an optional safety net. This tool outputs the lean modern syntax.
What font-display value should I use?
swap shows fallback text immediately then swaps in your font (good default); optional avoids layout shift; block briefly hides text. The tool lets you choose.
Why isn't my @font-face font loading?
Usually a wrong url() path (404) or a cross-origin/CORS issue. Check the path matches where the file is hosted.
How do I map bold and italic correctly?
Create one @font-face per file with matching font-weight and font-style, all using the same font-family name — then the browser picks the right one.
Can I self-host a Google Font with @font-face?
Yes — download the font (licence permitting), host the woff2 file, and use the @font-face CSS this tool generates.