Variable Fonts: Browser Support, Axes, Known Issues

What are variable fonts?

Variable fonts are an extension of the OpenType 1.8 font specification, jointly developed by Microsoft, Adobe, Apple, and Google. A single variable font file stores a continuous range of weights, widths, slants, and other design axes, so one file can replace dozens of static font files. CSS reads the file through @font-face and selects any point along each axis.

Which browsers does Variable Fonts support?

Variable fonts work in every modern browser. Chrome, Edge, Firefox, Safari, Opera, Samsung Internet, and the Android Browser all support them, while Internet Explorer never added support.

What are the registered axes in variable fonts?

OpenType registers five variation axes that map to standard CSS properties. Custom axes use uppercase tags and ride on the font-variation-settings property.

• wght (Weight): Sets thickness from 1 to 1000. Maps to the CSS font-weight property, so font-weight: 750 picks a value between 700 and 800.
• wdth (Width): Sets condensed to extended, typically 75 to 125. Maps to font-stretch, so font-stretch: 110% widens the letterforms.
• slnt (Slant): Sets the angle of upright letters from -90 to 90 degrees. Maps to font-style: oblique with an angle, e.g., font-style: oblique 12deg.
• ital (Italic): Toggles italic letterforms with the values 0 or 1. Maps to font-style: italic, switching to true italic glyphs when the font ships them.
• opsz (Optical size): Tunes stroke contrast and detail to the rendered point size. Maps to font-optical-sizing: auto, which lets the browser pick the right value for the current font-size.
• Custom axes: Type designers can ship axes such as GRAD (grade), MONO (monospace), CASL (casual), or XOPQ (x-opaque). Custom axes use uppercase 4-letter tags and are set through font-variation-settings: "GRAD" 100.

How do you use variable fonts in CSS?

Load the variable font through @font-face, declare the supported ranges on the descriptor, and drive the axes through standard CSS properties wherever they exist. Reach for font-variation-settings only for axes that have no CSS shortcut, since standard properties cascade and animate more cleanly.

@font-face {
  font-family: "Recursive";
  src: url("Recursive-VF.woff2") format("woff2-variations"),
       url("Recursive-VF.woff2") format("woff2");
  font-weight: 300 1000;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 15deg;
}

h1 {
  font-family: "Recursive", sans-serif;
  font-weight: 750;
  font-stretch: 110%;
  font-optical-sizing: auto;
  font-variation-settings: "GRAD" 100, "MONO" 0.4;
}

@supports not (font-variation-settings: "wght" 400) {
  h1 { font-family: "Recursive Static Bold", sans-serif; }
}

The format() hint format("woff2-variations") tells Chrome 66 to 70 and Safari 11 to 13 that the file is a variable font. Newer browsers accept plain format("woff2"), so list both for the widest reach. Wrap legacy fallbacks in an @supports negative block so older browsers swap to a static font without parsing the variable rules.

What are the known issues with variable fonts?

Variable fonts ship across every modern browser, but the rendering details still diverge. Plan for these issues before you commit a single variable file to production.

• Firefox skips OpenType-CFF2: Firefox renders TrueType-flavoured variable fonts but not the CFF2 (PostScript) variant. A PostScript variable file from Adobe Fonts falls back to the static face on Firefox and works fine on Chrome and Safari.
• Animation cost on long pages: Animating font-variation-settings forces the layout engine to rasterise glyphs on every frame. On long articles or large heading blocks the cost shows up as dropped frames; throttle the animation or scope it to a viewport-bound element.
• FOUT and FOIT during font load: A variable font is one big file (often 200-500 KB), so the browser may flash the fallback (FOUT) or hide the text (FOIT) before the variable file lands. Use font-display: swap and a numerically close fallback in font-family.
• font-variation-settings does not cascade: Setting one axis through font-variation-settings overwrites every other axis on the element. Reach for font-weight, font-stretch, and font-style first; use font-variation-settings only for custom axes.
• Internet Explorer and older Android: IE and Android Browser before 67 do not support variable fonts. Ship a static font fallback through the @font-face src list, or detect with @supports and serve the static stylesheet.

In my experience, the rendering gap that surprises teams most is the optical-sizing axis, since Safari turns it on automatically when the font ships an opsz axis but Chrome and Firefox only honour it when font-optical-sizing: auto is explicitly set on the element. Audit the value across browsers before shipping a font that uses opsz heavily.

Use the snippet below in any browser console to check whether the current browser supports variable fonts, axis ranges, and optical sizing.

// Run in the DevTools console of any browser to test variable font support.
const supportsVF = CSS.supports("font-variation-settings", '"wght" 400');
console.log("font-variation-settings:", supportsVF ? "yes" : "no");

// Probe individual registered axes via @font-face descriptors.
const supportsRange = CSS.supports("font-weight", "100 900");
console.log("variable font-weight range:", supportsRange ? "yes" : "no");

// Optical sizing is a separate switch that not every variable font ships with.
const supportsOpsz = CSS.supports("font-optical-sizing", "auto");
console.log("font-optical-sizing:", supportsOpsz ? "yes" : "no");

Citations

All Variable Fonts version numbers and platform notes in this guide come from these primary sources:

• MDN Variable fonts guide: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts
• Wikipedia, Variable font: en.wikipedia.org/wiki/Variable_font
• web.dev, Introduction to variable fonts on the web: web.dev/articles/variable-fonts
• WebKit blog, Variable Fonts on the Web: webkit.org/blog/7051/variable-fonts-on-the-web
• Mozilla Hacks, Variable Fonts Arrive in Firefox 62: hacks.mozilla.org/2018/09/variable-fonts-arrive-in-firefox-62
• Microsoft Learn, OpenType variable fonts overview: learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview
• OpenType specification 1.9, font variations: learn.microsoft.com/en-us/typography/opentype/spec/fvar
• W3C CSS Fonts Module Level 4: w3.org/TR/css-fonts-4
• Chrome Platform Status, Variable fonts: chromestatus.com/feature/5088401222041600
• Google Fonts knowledge, Introducing variable fonts: fonts.google.com/knowledge/introducing_type/introducing_variable_fonts
• Apple Developer, Safari 11.0 release notes: developer.apple.com/documentation/safari-release-notes/safari-11-release-notes