Upload a variable font and drag the weight, width, slant, italic and optical size sliders to see live font-variation-settings values.
Your font file is loaded locally with the FontFace API using an object URL, then registered for the preview box below. Each slider controls one of the five axis tags registered in the CSS Fonts specification. Moving any slider recomputes the full font-variation-settings string from all five current values and applies it straight to the preview element's style. Real per-font axis detection would require parsing the font's internal fvar table, which this zero-dependency tool intentionally does not do — instead, a browser simply ignores any axis tag a font doesn't define, so an unresponsive slider tells you something useful about the font itself.
wght, wdth, slnt, ital and opsz are the axis tags defined by the CSS Fonts spec, covered here as always-visible sliders.
Browsers already know which axes a font supports and silently ignore the rest, so this tool doesn't need to inspect the font file itself.
All five values are combined into one CSS string and applied to the preview in real time as you drag.
Copy the generated value straight into your own font-variation-settings declaration.
Reading a font's real registered axes means parsing its internal fvar table, which is out of scope for a zero-dependency browser tool like this one. Instead, these five sliders cover the CSS-standard registered axis tags (wght, wdth, slnt, ital and opsz). Per the CSS Fonts specification, a browser simply ignores any axis a given font doesn't define, so moving a slider that does nothing just tells you that particular font doesn't support that axis — try each one to discover what it actually supports.
It's a CSS property that lets you dial in the exact value of each variable font axis at once, using a comma-separated list of four-letter axis tags and numbers, like "wght" 650, "wdth" 85.
wght adjusts weight (thin to black), wdth adjusts width (condensed to expanded), slnt adjusts slant angle for oblique styles, ital toggles a true italic design if the font has one, and opsz adjusts optical size for how the font is drawn at small versus large sizes.
No. It's loaded locally with the FontFace API using a local object URL created from the file. Nothing leaves your browser.
That axis probably isn't registered in your font. Not every variable font implements all five standard axes — some only support weight, for example. Try the other sliders to see which ones this particular font responds to.
More handy tools from My Panda Toolbox.