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. Variable fonts have continuous weight; the Letter-Spacing Optimizer interpolates tracking values across the axis so any intermediate weight gets the right spacing. 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.
How to Use This Tool
Select from a library of popular variable fonts or upload your own. 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. 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.
Frequently Asked Questions
What is a variable font?+
A variable font is an OpenType font file that packages an infinite range of design variations — every weight, width, slant, and optical size — into a single file, accessed through continuous numeric axes rather than one separate file per style. A complete Inter family that once required eight static WOFF2 files now ships as one variable font that is smaller than two static files combined. Variables fonts have been supported in all modern browsers since 2018.
What are registered vs custom axes?+
Registered axes are the five common ones standardized by the OpenType spec: wght (weight), wdth (width), slnt (slant), ital (italic), and opsz (optical size). Their tags are lowercase and they map directly to CSS properties like font-weight and font-stretch. Custom axes are anything else the foundry designs in — GRAD (grade) on Roboto Flex, MONO and CASL on Recursive, SOFT and WONK on Fraunces. Their tags are uppercase and they can only be set through font-variation-settings. The playground parses both kinds from the font's fvar table automatically.
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. Every file you drop stays in your browser. The font is loaded through the FileReader API into an ArrayBuffer, parsed for its fvar table in JavaScript on your machine, and registered as a CSS @font-face via a blob URL. Nothing is sent to any server. The Google Fonts presets are the only network requests, and those only load when you pick one.
Which browsers support variable fonts?+
Every modern browser. Chrome 66+, Edge 17+, Firefox 62+, Safari 11+, Opera 53+. That is over 97% of global browser traffic as of 2026. Unlike some newer CSS features, variable fonts are one of the safest advanced typography choices you can make. The only older browsers that cannot render them are Internet Explorer and Safari versions older than 11, both of which have a combined global share under 1%.
Can I animate variable font axes?+
Yes, and this is one of the most underused capabilities on the web. font-variation-settings is animatable with CSS transitions and keyframes — you can animate a button's weight from 400 to 600 on hover, or pulse the grade axis to draw attention without layout shift. The exported CSS from the playground is a static snapshot, but copy the font-variation-settings line into a transition and it works. Stick to transform, opacity, and font-variation-settings for the most performant hover states in 2026.
Why use a variable font instead of multiple static fonts?+
A single variable font file contains every weight and width as continuous axes rather than separate files, so the total download is typically smaller than even two static cuts of the same family. You can also fine-tune values (a weight of 425 between Regular 400 and Medium 500) which static fonts cannot offer. The trade-off is that older browsers (pre-2018) do not support variable fonts and need a fallback path.
How do I write CSS to control variable font axes?+
Standard axes have CSS shortcuts: font-weight for wght, font-stretch for wdth, font-style oblique for slnt and ital. Custom axes use the font-variation-settings property with axis-tag/value pairs: font-variation-settings: wght 425, GRAD 50, opsz 14. The playground emits both shorthand and longhand declarations so you can paste whichever fits your code style.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service