Free Webfont CSS Generator

Generate production-ready @font-face CSS declarations with multiple formats, font-display strategies, unicode subsets, fallback stacks, and weight/style variants. No signup, 100% client-side.

Font Family
Path prefix for font file URLs. Leave as /fonts/ for relative paths.
Base filename without extension. Weight/style suffix is added automatically.
Font Formats
WOFF2 + WOFF covers 98%+ of browsers. Add TTF for older Android, EOT for IE 6-8, SVG for legacy iOS.
font-display Strategy
swap
Shows fallback immediately, swaps when loaded. Best for body text. No invisible text.
block
Short invisible period, then shows font. Use for icon fonts or when exact rendering matters.
fallback
Very short invisible period. If font loads fast, it swaps; otherwise stays with fallback.
optional
Browser decides. Best for slow connections. May never show the custom font. Great for performance.
auto
Browser default behavior. Usually similar to block. Not recommended for production.
Font Weight / Style Variants
Fallback Font Stack
Generated @font-face CSS
Preview
The quick brown fox jumps over the lazy dog
Preview uses the generated font-family + fallback stack. Custom fonts display only if they are installed on your system or loaded via a URL.

Need something more powerful?

Let us build it for you. Custom APIs, dashboards, automations — whatever you need.

Start a Project →
Open source

IT-Tools

269 free tools. No signup. Open source. Built by Christian Bucher.

IT-Tools Browse 269 Free Tools →

Related Tools

📊 CSV to Excel Convert CSV files to Excel XLSX and back with SheetJS 📊 JSON to Excel Convert JSON data (including nested objects) into an Excel spreadsheet 📊 Excel to JSON Convert Excel XLSX sheets into JSON objects or raw rows 💳 Invoice Generator Create professional invoices with PDF export 📄 Resume Builder Build professional resumes with templates, live preview, and PDF export ✉ Email Signature Generator Create professional HTML email signatures with templates