A variable font tester for every axis, not just weight
A variable font packs a whole family — thin to black, condensed to wide, upright to slanted — into one file, with axes you can set to any value in between. This variable font tester loads your TTF, OTF, WOFF or WOFF2 variable font, reads its axes and named instances from the fvar table, and gives every axis a slider, a number box and a play button that sweeps it from one end to the other so you can watch the letters morph.
Type your own words into the preview, switch to a waterfall of sizes or to a grid of all named instances, and copy CSS that uses the right properties: font-weight for wght, font-stretch for wdth, font-style: oblique for slnt, and font-variation-settings only for custom axes such as GRAD, SOFT or CASL — plus an @font-face rule with the correct weight and width ranges.
Your font is rendered by your own browser and never leaves your device. Three open-licence sample fonts (Roboto Flex, Fraunces and Recursive) can be tried with one click.
How to use the Variable Font Tester
- The page opens with a variable sample already loaded. Drop your own variable font on the box, or pick another sample: Roboto Flex has 13 axes, Fraunces has softness and “wonky”, Recursive has casual and monospace.
- Click into the preview and type your own text; set the Size.
- Drag a slider under Axes, type an exact value, or press the play button beside an axis to animate it. Press it again to stop.
- Click a Named instance (Light, Bold, Condensed Italic…) to jump to the designer’s preset values.
- Switch the preview to Waterfall to check the setting from 12 to 96 px, or Instances to compare every named style.
- Press Copy CSS and paste the
@font-faceand class rule into your stylesheet. Reset to default returns every axis to the font’s default.
Variable Font Tester features
Every axis from fvar
Registered axes (wght, wdth, slnt, ital, opsz) and custom ones (GRAD, XTRA, SOFT, WONK, MONO, CASL…) get their own control with the font’s real minimum, default and maximum; hidden axes are labelled.
Animate any axis
A smooth sweep from minimum to maximum and back — ideal for checking that weights interpolate cleanly. With reduced motion enabled it steps in five calm stages instead.
Named instances
The presets stored in the font are read with their names, so you can test exactly the styles a design system will ship.
CSS that follows the spec
High-level properties for registered axes, font-variation-settings for custom ones, oblique angles converted from slnt, and font-optical-sizing for opsz.
Waterfall and instances views
See one setting at eight sizes, or all instances side by side with your own text.
Honest about static fonts
Load a normal font and the page says it has no variation table instead of showing fake sliders.
Registered axes and how CSS reaches them
font-variation-settings overrides the high-level properties and is not inherited per axis, so use it only for custom axes and keep the rest in normal CSS. In @font-face, declare ranges (font-weight: 100 900) or browsers will synthesise bold instead of using the axis.
| Axis tag | What it changes | CSS property |
|---|---|---|
wght | Weight (thin 100 to black 900, any value between) | font-weight: 650 |
wdth | Width, as a percentage of normal | font-stretch: 87.5% |
slnt | Slant in degrees (negative leans right) | font-style: oblique 10deg for slnt −10 |
ital | Switch to italic forms (0 or 1) | font-style: italic |
opsz | Optical size: shapes tuned for small or large text | font-optical-sizing: auto (follows font-size) |
| Upper-case tags (GRAD, XTRA, SOFT…) | Designer-defined axes | font-variation-settings: "GRAD" 50 |
Limits and related tools
The tester shows what your browser renders: text shaping, kerning and the axes are real, but avalanche-style axis mappings in very new fonts and colour variations (COLRv1) depend on the browser version. It reads the first face of a collection. To ship a smaller file with one fixed setting, pin the axes in the font subsetter; to inspect glyphs one by one use the font viewer, and to check licences the font metadata viewer.
Variable Font Tester FAQ
How do I test a variable font online?
Drop the font file on this variable font tester. Every axis appears as a slider with its real range, and the preview updates as you drag or animate it.
How can I tell if a font is variable?
Load it here: a variable font lists its axes and named instances. A static font shows a message that it has no fvar table.
What is the difference between font-weight and font-variation-settings?
font-weight is the standard property and maps to the wght axis; font-variation-settings sets raw axis values and overrides everything else. Use the standard properties for registered axes and font-variation-settings for custom ones.
Why does my variable font look bold but not use the axis?
Usually the @font-face rule declares a single weight. Declare a range such as font-weight: 100 900, as in the copied CSS, so the browser uses the wght axis instead of faking bold.
Can I animate a variable font on my website?
Yes, with CSS transitions or animations on font-weight or font-variation-settings. It forces text re-layout, so keep it to headings and respect prefers-reduced-motion — as this page does.
Are the sample fonts free to use?
Space Grotesk, Roboto Flex, Fraunces and Recursive are all released under the SIL Open Font License 1.1, which allows commercial use.