Font Converter & CSS Generator
Load TTF, OTF, WOFF or WOFF2 fonts and generate @font-face CSS instantly. Live preview included. Free, browser-based.
Drop font files or click to browse
TTF, OTF, WOFF, WOFF2 — multiple files supported
About Font Converter
The Font Converter loads TTF, OTF, WOFF, and WOFF2 font files and generates the complete @font-face CSS declaration needed to use the font on the web. A live preview shows the font in action before you copy the code. Upload multiple variants at once to generate a full font family stack.
Use Cases
- →Convert a desktop TTF font to WOFF2 for web use
- →Generate a complete @font-face snippet for a custom brand font
- →Preview how a font renders before embedding it in a website
- →Check a font's family name, weight, and style metadata automatically
Tips
- ✓WOFF2 is the best format for web — it has the highest compression and universal modern browser support
- ✓Host the converted font files alongside your CSS for reliable self-hosting
- ✓The generated @font-face CSS works in all modern browsers without vendor prefixes
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.
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. You can edit the family name, weight and style before copying.
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. You can also edit them manually.
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. For self-hosted fonts, keep the font files in the same directory as your CSS or adjust the paths accordingly.
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 and is the recommended setting for performance.
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. The tool auto-detects the weight from the filename — you can override it manually.