@font-face Generator
Generate production-ready @font-face CSS code for web fonts
Drop your font files here
or click to browse from your computer
Supports: WOFF2, WOFF, TTF, OTF, EOT, SVG
Output Options
Developer & Verifier
Developed by
Marcus Rodriguez
Lead Developer
Verified by
Sarah Mitchell
Product Designer, Font Specialist
What is Webfont Generation?
A @font-face CSS kit is a collection of declarations that define custom fonts for websites, specifying file sources in WOFF2, WOFF, and TTF formats with optimized ordering so browsers download the smallest compatible file first. WOFF2 compresses 30–50% smaller than TTF using Brotli compression, making it the recommended primary format for all modern browsers.
The median Latin web font measures 12–19 KB in WOFF2 format (phpied.com analysis of 1,074 Google Fonts). WOFF2 has 96%+ browser support — safe as the primary format in any @font-face src list. Proper format ordering places WOFF2 first, then WOFF, then TTF, matching font loading best practices.
Base64 embedding eliminates HTTP requests but adds 33% to file size and reduces Gzip compression efficiency. The font-display property controls fallback behavior during page load — font-display: swap shows fallback text immediately, preventing the 3-second Flash of Invisible Text (FOIT) that occurs without it.
Upload font files in WOFF2, WOFF, TTF, OTF, EOT, or SVG format, then choose between URL-referenced or Base64-embedded output. For URL-based CSS, specify a custom font directory path (e.g., /fonts/ or ../assets/fonts/) to match your project structure. The generator produces complete @font-face rules with optimized format ordering and correct MIME types for each format.
How to Use This Generator
Upload Font Files
Drag and drop or click to upload fonts in TTF, OTF, WOFF, or WOFF2 formats.
Configure Settings
Specify font family name, weight, style, and font-display strategy for loading behavior.
Choose Output
Select URL-based references for hosted fonts or Base64 embedding for self-contained CSS.
Copy CSS
Copy the generated @font-face rules to use in your stylesheet or HTML.
Features
Web Font Format Comparison
| Format | Compression | File Size | Browser Support | Best For |
|---|---|---|---|---|
| WOFF2 | Brotli | Smallest (~30% less than WOFF) | Chrome 36+ Firefox 39+ Safari 12+ Edge 14+ | Modern web (recommended) |
| WOFF | zlib | Small | Chrome 5+ Firefox 3.6+ Safari 5.1+ Edge 12+ | Legacy browser fallback |
| TTF (TrueType) | None | Large (uncompressed) | Chrome 4+ Firefox 3.5+ Safari 3.1+ Edge 12+ | Universal compatibility |
| EOT | None | Large | IE 6-11 only | Legacy IE (deprecated) |
| SVG Font | None | Very large | Safari (old iOS) | Deprecated |
Frequently Asked Questions
What is WOFF2 and why should I use it?
Which font formats do I need for full browser support?
What is font hinting?
Should I subset my web fonts?
What is font-display in @font-face?
How do I optimize web font loading?
Related Tools & Guides
@font-face CSS Generator
Generate complete @font-face CSS declarations
Base64 Font Encoder
Convert fonts to Base64 data URIs for inline CSS
Font Subsetter
Reduce font file size by removing unused characters
Web Font Optimization Guide
Complete guide to optimizing web fonts for performance
WOFF vs WOFF2 Comparison
Compare compression, browser support, and performance
@font-face Optimization
Optimize font declarations for faster page loads