CMYK ↔ RGB ↔ HEX Color Converter
About Font Face Generator
The Complete CSS `@font-face` Rule Generator creates standardized, cross-browser custom web font stylesheets supporting variable font axes, `woff2` / `woff` formats, `font-display: swap`, local system cache checks, and Unicode subset ranges.
How to Use Font Face Generator
Step 1
Enter font family name and source file paths/URLs.
Step 2
Select font formats, weight range, and `font-display` policy.
Step 3
Review the generated `@font-face` declaration.
Step 4
Click "Copy @font-face CSS".
Practical Use Cases for Font Face Generator
Configuring Self-Hosted Web Fonts for GDPR & Speed
Generate production-ready `@font-face` stylesheets for self-hosted font files, eliminating Google Fonts privacy tracking cookies and DNS round-trips.
Configuring Variable Font Weight and Slant Axes
Declare continuous variable font weight ranges (`font-weight: 100 900;`) in a single consolidated `@font-face` rule.
Input & Output Examples
Generating Variable WOFF2 @font-face Rule
Family: "Geist", File: `/fonts/geist-var.woff2`, Format: `woff2-variations`, Weight: `100 900`, Display: `swap`
`@font-face {\n font-family: 'Geist';\n src: local('Geist'), url('/fonts/geist-var.woff2') format('woff2-variations');\n font-weight: 100 900;\n font-style: normal;\n font-display: swap;\n}`Key Features & Performance
- ✓Supports modern formats: WOFF2, WOFF, TTF, and Variable Font Variations (`woff2-variations`).
- ✓Configures: `font-display` (`swap`, `optional`, `fallback`, `block`), `unicode-range`, `font-stretch`, `font-style`.
- ✓Generates `local()` lookups to leverage pre-installed local system fonts.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy CSS `@font-face` block.
Key Terminology & Definitions
`font-display: swap`
A rendering policy instructing browsers to show fallback text immediately while the custom font downloads, then swap once loaded to eliminate FOIT.
Variable Web Font (`woff2-variations`)
A single font file that encodes all weights, slants, and widths along continuous mathematical axes, reducing total HTTP requests.