@font-face Generator
Generate a complete, correct CSS @font-face rule for any web font. Configure family name, WOFF2/WOFF source URLs, weight range, style, display strategy, and unicode-range. Copy the output directly into your stylesheet.
How to use the @font-face generator
- Enter the font family name — this is what you will reference in CSS.
- Paste the URL of your WOFF2 file. Add WOFF as fallback if supporting very old browsers.
- Set the weight. Use a single value for static fonts (400) or a range for variable fonts (100 900).
- Choose a
font-displaystrategy.swapis the default for body text. - Copy the generated CSS into your stylesheet or a dedicated
fonts.cssfile.
Understanding the @font-face properties
| Property | Purpose | Recommended value |
|---|---|---|
font-family | Name to reference in CSS | Match your design system name |
src | Font file URLs | WOFF2 first, WOFF second (optional) |
font-weight | Weight the file covers | 400 for static, 100 900 for variable |
font-style | Normal, italic, or oblique | normal |
font-display | Loading behaviour | swap for body, optional for zero CLS |
unicode-range | Limit to specific characters | Optional — useful for subsetting |
Frequently asked questions
What is @font-face in CSS?
It is a CSS rule that loads a font file and maps it to a family name. Once declared, you reference the family with font-family anywhere in your CSS.
Should I include both WOFF2 and WOFF sources?
WOFF2 alone is sufficient for all browsers released after 2016. Include WOFF only if supporting older browsers — most production projects do not need it.
What is font-weight: 100 900?
That is a weight range declaration for variable fonts. It tells the browser the single font file covers the full weight spectrum, avoiding synthesised bold.
Do I need unicode-range?
Only if you are subsetting a font to specific characters. For most projects, leave it empty and the font will apply to all characters it contains.
What does font-display do?
It controls how the browser handles the gap between page paint and font load. swap renders fallback immediately and swaps when ready. block hides text. fallback and optional are middle-ground strategies.