@font-face Generator
Load TTF, OTF, WOFF or WOFF2 fonts and generate the @font-face CSS you need to self-host them. Live preview, editable family, weight and style. Free, browser-based.
Drop font files or click to browse
TTF, OTF, WOFF, WOFF2 — multiple files supported
About @font-face Generator
Custom fonts are a core component of brand identity on the web, but using them correctly means writing proper @font-face declarations. Desktop fonts typically come in TTF or OTF format, while web performance best practices recommend WOFF2 — which achieves 30–50% smaller file sizes through Brotli compression — with WOFF as a fallback for older browsers.
Our @font-face Generator loads TTF, OTF, WOFF, and WOFF2 files and writes the complete @font-face CSS declaration needed to self-host the font on a website. A live text preview renders the font immediately so you can verify it looks correct before using it. Family name, weight, and style are auto-detected from the filename — a file called Inter-BoldItalic.ttf becomes font-weight: 700 and font-style: italic — and every field stays editable if the guess is wrong. Your font file itself is never modified or re-encoded, so a licensed original stays exactly as the foundry shipped it.
Self-hosting fonts rather than relying on Google Fonts or Adobe Fonts improves performance (eliminating a third-party network request), provides privacy for your visitors (no cross-site tracking cookies), and ensures the font continues to work even if the external service changes or goes offline.
How to Use @font-face Generator
- 1Drop your font files onto the upload area, or click it to browse — TTF, OTF, WOFF and WOFF2 are accepted, and you can load several at once.
- 2The live preview renders each font immediately — type your own text in the preview field and drag the size slider from 12 to 80 pixels to judge it at real sizes.
- 3Check the auto-detected family name, weight and style, and correct any of them inline — weight is a 100-to-900 dropdown labelled Thin through Black.
- 4Copy the generated @font-face CSS from the output panel, or download it as a ready-made fonts.css file.
- 5Update the url() paths in the CSS to point at wherever you host the font files on your server.
Use Cases
- →Generate a complete @font-face CSS block for a custom brand or licensed font
- →Write the correct format() hint for a font without memorising that OTF maps to opentype and TTF to truetype
- →Preview how a font renders before committing to embedding it in a website
- →Load bold, italic and regular variants at once and get every @font-face block for the family in one place
- →Self-host fonts for improved performance and visitor privacy (no third-party requests)
- →Check whether a font file is intact and renders correctly before shipping it to production
Tips
- ✓WOFF2 is the best format for web use — supported by every modern browser and the highest compression of them all
- ✓Always self-host font files alongside your CSS rather than linking from external URLs in production
- ✓The generated @font-face CSS is standard syntax and works in all modern browsers without prefixes
- ✓Name your files like Inter-Bold.ttf or Inter-BoldItalic.otf and the weight and style are filled in for you
- ✓Every generated block includes font-display: swap, so your text stays visible while the font loads
- ✓Font subsetting (limiting character sets) further reduces file size — useful for Latin-only use cases
- ✓Verify the font license permits web use before self-hosting — a desktop licence usually does not cover it
- ✓This tool writes CSS, it does not re-encode fonts: if you need a TTF turned into a WOFF2 file, use Google's woff2 command-line tool or your foundry's web-font package
Frequently Asked Questions
TTF (TrueType), OTF (OpenType), WOFF (Web Open Font Format) and WOFF2. All formats are loaded via the browser's native FontFace API and previewed instantly without any server upload.
No — and it does not need to. This is an @font-face generator: it reads the font you already have, previews it, and writes the CSS that points at it, with the correct format() hint for whichever format you loaded. The font file itself is never modified, so your licensed original stays exactly as it is. If you specifically need a TTF or OTF re-encoded as WOFF2, use Google's woff2 command-line tool or your font foundry's own web-font package.
After uploading your font files, the tool generates a complete @font-face rule for each file, including the font-family, font-weight, font-style and src with the correct format() hint.
Yes. Upload all variants at once (Regular, Bold, Italic, etc.) and the tool will generate a separate @font-face block for each, with auto-detected weight and style based on the filename.
Copy the CSS and paste it into your stylesheet. Update the url() paths to point to where your font files are hosted on your server.
font-display: swap tells the browser to show text using a fallback font immediately while the custom font loads, then swap to it when ready. This prevents invisible text during font loading.
Font weight values from 100 to 900 correspond to: 100 Thin, 200 ExtraLight, 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold, 900 Black.