Web Font Generator
Generate @font-face CSS declarations for web fonts
Configuration
Generated CSS
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2'),
url('/fonts/MyFont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Usage */
body {
font-family: 'MyFont', sans-serif;
}Generate production-ready @font-face CSS for your web fonts. Configure all options including font-display, unicode-range, and multiple formats.
Key Features
- ✓Generate @font-face CSS
- ✓Support for WOFF2, WOFF, TTF, EOT formats
- ✓Font-display strategy selection
- ✓Unicode range support
- ✓Copy-ready code output
- ✓Weight and style configuration
How to Web Font CSS Generator — @font-face Made Easy | Xonvert
- 1
Enter font family name
Type the CSS font-family name you want to use.
- 2
Set the font file path
Provide the URL or relative path for your font files.
- 3
Select formats to include
Choose WOFF2, WOFF, TTF, or EOT based on browser needs.
- 4
Configure weight and display
Set font-weight, font-style, and font-display strategy.
- 5
Copy the generated CSS
Paste the @font-face rule into your stylesheet.
Common Use Cases
- •Setting up custom web fonts
- •Optimizing font loading performance
- •Generating cross-browser font declarations
- •Creating font-display swap configurations
Frequently Asked Questions
What is font-display: swap?▼
It tells the browser to use a fallback font immediately and swap to the custom font once loaded. This prevents invisible text during loading.
Do I need all formats?▼
For modern browsers, WOFF2 alone is sufficient. Add WOFF for older browser support.