Variable Font Playground

Explore variable font axes (weight, width, slant, optical size) with live sliders and CSS output.

Tested tool guide Tested browser tools Checked August 16, 2026

What Variable Font Playground does, with a checked example

Variable Font Playground loads a variable font and gives you one slider per design axis - weight, width, slant, optical size, plus any custom axes the face ships - spanning the axis's minimum to maximum. The sample text re-renders on every drag, because the browser interpolates the font's design masters in real time. When you like the look, the CSS panel shows the declaration that reproduces it, ready to copy. What most people get wrong: axes are per-font. A width slider at maximum means different things on different fonts, and a font without a slant axis has no slant to give.

Worked example

A concrete input and expected output from the current implementation.

Input

Weight slider set to 700, width slider set to 110, on a font whose wght axis spans 100 to 1000 and wdth spans 25 to 151 (the ranges of Roboto Flex, the usual test face for these playgrounds).

Expected output

The sample text redraws at the heavier, wider instance, and the CSS panel shows: font-variation-settings: "wght" 700, "wdth" 110;

The tool writes the slider positions as raw axis values on the font's four-letter axis tags, the format the CSS spec defines for direct axis control. The wdth value is in axis units, not percent: 110 here is the same point font-stretch: 110% would select, and the preview shows the real interpolated outlines, not a scaled fake.

How the result is produced

Axis sliders

A variable font declares its axes in its fvar table: each axis has a four-letter tag and a minimum, default, and maximum. The tool reads the loaded face's axes and builds one slider per axis, starting at the defaults. Because the browser interpolates between the font's design masters, every slider position renders genuine outlines at that weight or width rather than a synthesized approximation.

Generated CSS

The panel emits one font-variation-settings declaration listing the four-letter axis tags you touched, for example "wght" 700, "wdth" 110. The named properties map onto the same axes - font-weight to wght, font-stretch to wdth, font-style: oblique to slnt, font-optical-sizing: auto to opsz - but variation settings are the one uniform form that reaches every axis, including a font's custom ones, and they override the named properties wherever both are set.

Good uses

Choosing a weight and width for a heading-body pairing while actually looking at the glyphs at real sizes, instead of guessing from a font menu's thumbnails.
Tuning a display setting - heavier, wider, slightly slanted - until it holds up, then copying the CSS straight into the stylesheet.
Auditing a font before committing to it: which axes it really has, how far each one goes, and whether the extremes stay legible.

Limits and checks

Values are raw axis units, not percentages: wdth 110 equals font-stretch: 110%. Out-of-range values are clamped to the font's min-max, so a weight slider pushed past the maximum simply renders the maximum.
The generated declaration overrides font-weight and font-stretch on the same element. If the page already sets them, the copy-pasted result will not match the preview until you remove the conflicting properties.
Slant is not italic. slnt tilts the upright design; the separate ital axis (binary, 0 or 1) switches to an italic cut of the glyphs. And browsers that predate variable fonts ignore the settings and render the font's default instance.

Common questions

Why does the output use "wght" 700 instead of font-weight: 700?

Both reach the same axis. The named properties are conveniences the browser maps onto the axes - font-weight sets wght, font-stretch sets wdth, and so on - while font-variation-settings is the direct form. Use it when you combine several axes in one declaration or touch a custom axis, and know it overrides the named properties when both are present.

Will the same settings work on another variable font?

Not meaningfully. Each font defines its own axis set and ranges, so wdth 110 widens one face subtly and sits outside another's range entirely; fonts with only a weight axis ignore width settings. Always copy the font-family name together with the settings, and re-check the sliders after swapping fonts.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.