Variable Font CSS Generator
Generate correct CSS for variable fonts. Weight range declarations, width ranges for multi-axis variable fonts, and copy-ready usage examples for every weight in your font.
Standard variable font axes
| Axis | Tag | CSS property | Typical range |
|---|---|---|---|
| Weight | wght | font-weight | 100–900 |
| Width | wdth | font-stretch | 50%–200% |
| Italic | ital | font-style | 0 or 1 |
| Slant | slnt | font-style: oblique | -90° to 90° |
| Optical size | opsz | font-optical-sizing | 8–144pt |
Frequently asked questions
How do I use a variable font in CSS?
Declare it in @font-face with a weight range (font-weight: 100 900), then use font-weight anywhere in your CSS from 100 to 900.
What is font-variation-settings?
Low-level control for arbitrary axes, including custom axes without a high-level CSS property. Prefer font-weight, font-stretch, and font-style for standard axes — they are more performant and better supported.
Do I need font-variation-settings for weight?
No. Use font-weight — it is the standard high-level property for the weight axis. Only use font-variation-settings for custom axes or when you must animate a specific value.
Are variable fonts smaller than static fonts?
Yes, usually. A single variable file is smaller than 4+ static files combined. WOFF2 variable files are typically 40–70% smaller than the equivalent static files total.