Question 1

What is a variable font?

Accepted Answer

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.

Question 2

What are registered vs custom axes?

Accepted Answer

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.

Question 3

What is font-variation-settings?

Accepted Answer

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.

Question 4

Will this upload my font file anywhere?

Accepted Answer

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.

Question 5

Which browsers support variable fonts?

Accepted Answer

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%.

Question 6

Can I animate variable font axes?

Accepted Answer

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.

📖 Learn More