What Is Variable Font Playground?
Variable Font Playground lets you explore and fine-tune variable font axes in real time. Variable fonts contain multiple styles (weight, width, slant, optical size, and custom axes) in a single file — this tool lets you manipulate every axis visually and generate the corresponding CSS.
How to Use This Tool
Select one of six Google variable fonts or upload your own (.ttf, .otf, .woff or .woff2). Use the sliders to adjust each variation axis — weight, width, italic, slant, and any custom axes the font supports. Preview your text at different sizes and see the CSS font-variation-settings update in real time. Sliders start where the browser renders the font when nothing is set (weight 400, width 100%, optical size following the font size), and only the axes you move are written into the CSS. Copy the CSS when you’ve found the right settings. Everything runs in your browser.
Why Use Variable Font Playground?
Variable fonts offer incredible typographic control, but finding the right axis values by editing CSS blindly is slow. This tool gives you instant visual feedback across all axes simultaneously, making it easy to discover weights and styles you didn’t know the font had. It’s free, with no account or font license required for the built-in library. For a detailed walkthrough, see our step-by-step guide.
Related tools
- To choose letter-spacing for the weight you settle on, try the Letter-Spacing Optimizer.
- After dialing in the variable axes, the Text Shadow Designer layers shadow effects (neon, embossed, retro) that compose well with heavy or light weights.
- To see every axis the font exposes (including custom axes like GRAD, MONO, SOFT) without scrubbing, the Font Metrics Inspector reads the fvar table directly.
Frequently Asked Questions
What is a variable font?+
A variable font is an OpenType font file whose design can vary continuously along one or more axes, such as weight, width, slant or optical size, instead of shipping one file per style. The axes, with their minimum, default and maximum values, are listed in the font's fvar table. Browsers have supported them since 2017–2018 (Chrome 62, Safari 11, Edge 17, Firefox 62).
What are registered vs custom axes?+
Registered axes are the five defined in the OpenType spec: wght (weight), wdth (width), slnt (slant), ital (italic) and opsz (optical size). Their tags are lowercase and most have CSS equivalents: font-weight, font-stretch, font-style and font-optical-sizing. Custom axes are anything else a type designer adds, such as GRAD (grade) on Roboto Flex, MONO and CASL on Recursive, or SOFT and WONK on Fraunces. Their tags are uppercase and they can only be set with font-variation-settings. For an uploaded font the playground reads every axis from its fvar table; the six presets use axis ranges taken from the fonts' own fvar tables.
What is font-variation-settings?+
font-variation-settings is the low-level CSS property that controls variable font axes directly: font-variation-settings: 'wght' 500, 'wdth' 85. It is the only way to set custom axes, and it always wins over font-weight and font-stretch when both are declared. One gotcha: every property you do not explicitly include resets to its default. If you set wght in one class and slnt in another, you have to repeat wght in the second class or it will snap back. Use font-weight and font-stretch when you only need registered axes; use font-variation-settings when you need custom axes or want atomic control.
Will this upload my font file anywhere?+
No. The file stays in your browser: it is read with the FileReader API, its fvar table is parsed in JavaScript on your device, and it is registered as a font through a blob URL. WOFF2 files are Brotli-compressed; browsers without built-in Brotli decompression (Chrome and Edge, as of 2026) load a small decoder script from this site to read them. The Google Fonts presets download their font files from Google when you pick one.
Which browsers support variable fonts?+
All current browsers. According to MDN's compatibility data, font-variation-settings arrived in Chrome 62, Safari 11 (macOS 10.13 / iOS 11 or later), Opera 49, Edge 17 and Firefox 62, all released in 2017–2018. Internet Explorer never supported it.
Can I animate variable font axes?+
Yes. font-variation-settings, font-weight and font-stretch can all be transitioned or animated with keyframes, so a button can move from weight 400 to 600 on hover. Unlike transform and opacity, though, changing an axis changes the glyphs, so the browser has to redraw (and, if widths change, re-lay out) the text on every frame; keep animated text short. Some fonts include a grade axis (GRAD) designed to change stroke weight without changing character widths, which avoids the text reflowing.
Why use a variable font instead of multiple static fonts?+
One variable file covers every weight and width in its range, so a page that uses several weights downloads one file instead of several, and you can use in-between values such as weight 425 that static fonts don't have. Whether it is smaller overall depends on the font and on how many static weights you would otherwise load: a variable file is larger than any single static weight.
How do I write CSS to control variable font axes?+
Registered axes have high-level CSS properties: font-weight for wght, font-stretch for wdth, font-style: oblique for slnt (note the sign: slnt -10 is font-style: oblique 10deg) and font-style: italic for italic, while font-optical-sizing: auto sets opsz from the font size. Custom axes, and opsz values you want to fix, use font-variation-settings with quoted tags: font-variation-settings: 'GRAD' 50, 'opsz' 14. The playground's CSS uses the high-level properties for weight, width and slant and font-variation-settings for everything else.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service