Free @font-face CSS Generator for Custom Web Fonts
Upload your font files and generate @font-face CSS rules instantly
Drop your font files here
or click to browse from your computer
Supports: WOFF2, WOFF, TTF, OTF, EOT, SVG
Developer & Verifier
Developed by
Marcus Rodriguez
Lead Developer
Verified by
Sarah Mitchell
Product Designer, Font Specialist
What is @font-face CSS?
A @font-face CSS declaration is a rule that defines a custom font family, specifies file sources in priority order, and controls loading behavior through the font-display property. 88% of websites use custom web fonts (HTTP Archive 2025), making @font-face the foundation of modern web typography. See our guide to @font-face optimization techniques to get the most from your declarations.
WOFF2 handles 65% of all font file requests with 96%+ browser support (HTTP Archive 2025). Correct format ordering in the src descriptor lists WOFF2 first, then WOFF, then TTF; browsers select the first supported format and skip the rest.
The font-display: swap property prevents Flash of Invisible Text (FOIT). Without it, Chrome and Firefox hide text for 3 seconds while waiting for the font to load. Font loading strategies and CSS implementation determine whether fonts block rendering or display fallback text immediately.
This generator accepts multiple font files (WOFF2, WOFF, TTF, OTF, EOT, and SVG) via drag-and-drop upload. Each font receives individual controls for family name, weight (100–900), style (normal, italic, oblique), and font-display value. The output is production-ready @font-face CSS with correct format hints and source ordering, available as clipboard copy or downloadable .css file. EOT declarations include the IE9-compatible query string syntax for legacy support.
How to Use This Generator
Upload Your Fonts
Drag and drop or click to upload your font files. Supports WOFF2, WOFF, TTF, OTF, EOT, and SVG formats. Follow our CSS implementation guide for best practices once your fonts are uploaded.
Customize Settings
Set the font family name, weight (100-900), style (normal/italic), and display property for each font.
Preview CSS Code
See the generated @font-face CSS rules in real-time as you adjust settings for your fonts.
Copy or Download
Copy the CSS to your clipboard or download as a fonts.css file ready to use in your project.
Features
Understanding font-display Values
| Value | Behavior | Best For |
|---|---|---|
| swap | Shows fallback immediately, swaps when loaded. See FOUT and FOIT solutions for context. | Most websites (recommended) |
| block | Hides text briefly (~3s), then shows font or fallback | Icon fonts, critical branding |
| fallback | Short block (~100ms), swaps within ~3s or uses fallback | Balance between speed and consistency |
| optional | Very short block, only swaps if immediately available | Performance-critical pages |
| auto | Browser default (usually similar to block) | Legacy behavior |
Frequently Asked Questions
What is @font-face?
How do I use the generated CSS?
What font formats are supported?
Is my font file uploaded to a server?
What is font-display and which should I use?
Can I generate CSS for multiple fonts at once?
What's the difference between font-weight values?
Related Tools & Guides
Font Converter
Convert between TTF, OTF, WOFF, WOFF2, and more formats
Font Subsetter
Reduce font file size by removing unused characters
Webfont Generator
Generate complete @font-face CSS kits with optimized format ordering
CSS Implementation Guide
Best practices for implementing web fonts in your CSS
WOFF vs WOFF2 Comparison
Compare compression, browser support, and performance between formats
@font-face Optimization
Optimize font declarations for faster page loads