N
nex
—
toolbox
Home
Tool Categories
Nex World
About Us
FAQ
Contact Us
🔍
Home
›
Font Explorer
›
Web Font CSS Generator
🎨 Web Font CSS
Generator
Generate Google Fonts import code, @font-face rules, and complete font-family CSS declarations.
Ad Slot — Below Header (728×90 Leaderboard)
Google Fonts Import
@font-face Builder
Font Name
Weights
100 Thin
200 Extra Light
300 Light
400 Regular
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Black
Include Italic
Display Strategy
swap (recommended)
block
fallback
optional
auto
CSS @import
Copy
HTML <link>
Copy
font-family
Copy
Font Family Name
Font File Path (woff2)
Fallback woff Path (optional)
Weight
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Black
Style
Normal
Italic
Display
swap
block
fallback
optional
@font-face Rule
Copy
Usage
Copy
Related Tools You Might Like
Fonts
System Font Stacks
→
Fonts
Google Fonts Browser
→
Fonts
Typography Scale Calculator
→
Ad Slot — Mid Content (Responsive In-Article)
💡
What Is This?
Generate optimized @font-face CSS declarations
Configure font-display, unicode-range, and format options
Supports WOFF2, WOFF, and TTF font files
Proper fallback chain setup included
Essential for self-hosting web fonts
🛠️
How to Use
Select or upload your web font files (WOFF2, WOFF, TTF)
Configure font-family name, weight, and style
Set font-display strategy — swap, fallback, optional
Specify unicode-range for subsetting if needed
Copy the generated @font-face CSS declaration
🎯
Use Cases
Self-hosting Google Fonts for GDPR compliance and performance
Generating optimized @font-face declarations for custom fonts
Configuring font-display for better loading performance
Setting up unicode-range subsetting for multilingual sites
Building proper CSS for variable font implementations
Ad Slot — Bottom (300×250 Rectangle)