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
Custom fonts are a core component of brand identity on the web, but using them correctly requires converting them to the right formats and writing proper @font-face declarations. Desktop fonts typically come in TTF or OTF format, but 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 Converter loads TTF, OTF, WOFF, and WOFF2 files and generates 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. The tool also reads embedded font metadata — family name, weight, and style — and automatically populates the correct values in the @font-face output.
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 Converter
- 1Click "Upload Font" and select a TTF, OTF, WOFF, or WOFF2 font file from your device.
- 2The live preview renders the font immediately — type custom text in the preview field if desired.
- 3Review the auto-detected font family name, weight, and style metadata.
- 4Copy the generated @font-face CSS declaration from the output panel.
- 5Download the font file in your preferred web format (WOFF2 recommended) for self-hosting.
Use Cases
- →Convert a desktop TTF or OTF font to WOFF2 for optimized web delivery
- →Generate a complete @font-face CSS block for a custom brand or licensed font
- →Preview how a font renders before committing to embedding it in a website
- →Check a font file's family name, weight, and style metadata automatically
- →Self-host fonts for improved performance and visitor privacy (no third-party requests)
- →Convert multiple font weight variants and combine their @font-face declarations for a full family
Tips
- ✓WOFF2 is the best format for web use — universal browser support and the highest compression
- ✓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
- ✓Upload bold, italic, and regular variants separately to get a complete font family stack
- ✓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 — most commercial fonts do not
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.
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.