CSS Variable Font Generator
What a variable font is
A variable font holds a continuous range of styles in one file instead of a separate file per weight. Rather than picking from bold or regular, you set a position on each axis — weight, width, optical size — and the browser interpolates the shape.
Syntax
font-variation-settings: 'wght' <number>, 'wdth' <number>, 'opsz' <number>;| Part | What it controls |
|---|---|
| 'wght' | Weight, usually 100 to 900. Any value in between is valid, so 437 is a real weight, not a rounding of 400. |
| 'wdth' | Width as a percentage of normal. Narrower widths let long headings fit without shrinking the type size. |
| 'opsz' | Optical size. Designed to thicken strokes and open spacing at small sizes, and refine them at display sizes. |
| 'slnt' and 'ital' | Slant in degrees, and a switch into true italic shapes. They are not the same thing. |
| font-weight first | Prefer the standard properties — font-weight, font-stretch, font-optical-sizing — where they exist. They inherit and animate properly; font-variation-settings does not inherit per axis. |
| custom axes | Fonts may expose their own, written in uppercase such as 'GRAD' or 'YOPQ'. Check the font's documentation for what it supports. |
Notes from practice
One file replaces a dozen
A family that shipped nine weights as nine files becomes one variable file, usually smaller than three of the statics — and you gain every weight in between.
Prefer the standard properties
font-weight: 437 works on a variable font and inherits normally. font-variation-settings overrides all axes at once, so a child setting one axis silently resets the others.
Axes are animatable
Weight and width interpolate smoothly, so a hover that thickens a link is a real transition rather than a jump between two cut weights.
CSS Variable Font Generator FAQ
What is a variable font?
A single font file containing a continuous range of styles along one or more axes, such as weight and width. Instead of loading separate regular and bold files, you set a position on the axis and the browser renders that exact instance.
How do I use a variable font in CSS?
Load it with @font-face, declaring the supported range: font-weight: 100 900. Then set font-weight to any value in that range, or use font-variation-settings for axes that have no standard property.
Should I use font-weight or font-variation-settings?
Use the standard properties wherever one exists — font-weight, font-stretch and font-optical-sizing. They inherit correctly and animate predictably. font-variation-settings sets every axis at once, so a child declaration silently resets the axes it omits.
What does the opsz axis do?
Optical size adjusts letterforms for the size they are rendered at: thicker strokes and looser spacing for small text, finer detail and tighter spacing for display sizes. font-optical-sizing: auto lets the browser handle it from the font size.
Do variable fonts improve performance?
Usually. One variable file is typically smaller than three or four static weights, so a site using several weights downloads less. A site that only ever uses one weight may be better served by a single static file.
Related generators
- Typography — Size, spacing, decoration, text-wrap and text-stroke for any text block.
- Gradient Text — Fill letters with a gradient using background-clip: text, with an optional shimmer animation.
- Text Shadow — Layer text shadows for long shadows, embossed letterpress or neon glow.
- Modern Color Functions — oklch(), color-mix(), relative colour syntax and light-dark(), with an sRGB hex fallback where it applies.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.