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

What is font-variation-settings?

font-variation-settings is the low-level CSS property that controls variable font axes directly. It is the only way to set custom axes, and it always wins over font-weight and font-stretch when both are declared. One important gotcha: every property you do not explicitly include resets to its default, so 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.

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. 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%. Variable fonts are one of the safest advanced typography choices available today.

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. Because font rendering lives on the compositor, axis animations run at 60fps on the fast path alongside transform and opacity. For layout-stable hover states, prefer GRAD to wght when the typeface supports it so the text stays the same width.

How do I handle the font-variation-settings reset gotcha?

font-variation-settings does not cascade additively. Every axis you do not explicitly list reverts to its default, so if one class sets slnt -10 and another sets GRAD 100, applying the second class wipes out the slant. You have to repeat every axis you want to preserve in every rule that touches this property. For this reason, prefer font-weight and font-stretch whenever you can — they cascade normally. Reach for font-variation-settings only when you need custom axes or precise atomic control over multiple axes at once.

How to Use Variable Fonts in CSS (2026)

⚡

Try Variable Font Playground

Free, no signup →