Refract

Variable font playground

Drop in a font to explore every axis it has, from weight and width to custom ones like grade or roundness. Type your own text, step through the named styles, and copy CSS that uses the right properties.

Runs in your browser · files stay on your device

Variable fonts hold every weight in one file

Axes

About this font

CSS


Display










How to use the variable font playground


  1. Add a font. Drop in a TTF, OTF, WOFF or WOFF2 file. The variable version of Geist is loaded as a sample, with a weight axis from 100 to 900.
  2. Drag the axes. Every axis in the font gets a slider. Registered axes like weight, width and slant are named; custom axes show their four-letter tag. Click a named style to jump to it, or press Animate to watch the first axis move.
  3. Test it on your words. Click the preview and type. Switch to Waterfall to see the same text at every common size, or All characters to check which letters and symbols the font covers.
  4. Copy the CSS. The CSS includes an @font-face rule with the right weight and width ranges, and a class that uses font-weight, font-stretch and font-style where it can, falling back to font-variation-settings only for custom axes.


What is a variable font?
A traditional font family ships a separate file for each style: Light, Regular, Bold, and so on. A variable font stores the whole range in one file, with axes you can set to any value in between. That means a weight of 450 or 650 is just as easy as 400 or 700, and one file often replaces six or more, saving requests and kilobytes.
Registered and custom axes
Five axes are standardised: weight (wght), width (wdth), slant (slnt), italic (ital) and optical size (opsz). Each maps to an ordinary CSS property, so font-weight: 650 just works. Designers can add custom axes too, with uppercase tags such as GRAD (grade) or ROND (roundness); those are set with font-variation-settings.
Why prefer font-weight over font-variation-settings?
font-variation-settings overrides everything at once and isn’t inherited the way you might expect: setting one axis on a child element resets the others. Using font-weight and font-stretch keeps styles predictable, works with <strong> and headings, and lets the browser apply optical sizing automatically.


Frequently asked questions


Is my font uploaded?
No. The font is read and rendered by your own browser and never leaves your device.
Which browsers support variable fonts?
All current browsers support variable fonts, including Chrome, Edge, Firefox and Safari on desktop and mobile.
Why does my font show no axes?
It’s a static font with one fixed style. Many families publish both static and variable versions; look for a file with “Variable” or “[wght]” in its name.
How do I make a variable font smaller?
Subset it to the characters you need and convert it to WOFF2 with the font converter. Axes are kept, and files often shrink by 80% or more.