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

NexTool on GitHub

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

GitHub Browse 269 Free Tools →

Related Tools

CSS Box Shadow Generator · Meta Tag Generator · Emoji Picker & Search

Related Tools

Free Git Diff Viewer · Free JSON to YAML Converter · Free Accessibility Checker

Related Tools

Free JSON to YAML Converter · YAML to JSON Converter · Free API Request Builder