Open Font Format avar2 text shaping and glyph rendering

at a glance

why it exists

OpenType Variable Fonts (avar version 1) let a single font file interpolate along axes like weight, width, and slant. But axes are independent: changing weight doesn't affect how slant is rendered, even if the design calls for it. avar version 2 adds axis remapping: each axis's value is further modified by contributions from one or more other axes, expressed using the font's own variation mechanism. This lets a designer create a single "expression" slider that meaningfully adjusts a dozen underlying axes in concert — something that was only possible through hand-authored multiple masters before. For web developers, avar2 means fonts that use it will render as intended in Chrome 148+ without any CSS changes. For font designers, avar2 unlocks a new tier of expressive variable fonts.

using avar2 fonts on the web

No new CSS is required to render variable fonts using avar2: if a font file includes an OpenType avar version 2 table, the browser automatically applies its axis relationship tables during text shaping and glyph rasterization. To conditionally deliver avar2-enabled font files, CSS Fonts 4 supports the tech(avar2) capability query within @font-face src: declarations.

@font-face {
  font-family: 'ExampleFont';
  src: url('/fonts/font-avar2.woff2') format('woff2') tech(avar2),
       url('/fonts/font-fallback.woff2') format('woff2');
}

examples

Authors can declare an avar2 font and control coordinated axes with standard CSS font properties or custom axis tags in font-variation-settings:

A font with a semantic expression axis

@font-face {
  font-family: 'AVar2Font';
  src: url('/fonts/avar2-demo.woff2') format('woff2');
}

.expressive {
  font-family: 'AVar2Font', sans-serif;
  /* Setting a single custom axis, the font's avar2 tables
     coordinate weight, contrast, and x-height automatically */
  font-variation-settings: 'EXPR' 0.8;
}

Inspecting variable font axes

/* You can still set individual axes directly; avar2 remapping
   is applied on top of the values you specify */
.fine-control {
  font-family: 'AVar2Font', sans-serif;
  font-variation-settings: 'wght' 700, 'wdth' 85, 'opsz' 18;
}

Detecting avar2 support in CSS

@font-face {
  font-family: 'AVar2Font';
  /* prefer the avar2 version when the browser supports it */
  src: url('/fonts/avar2.woff2') format('woff2') tech(avar2),
       url('/fonts/fallback.woff2') format('woff2');
}

browser support

see also

• OpenType spec — avar Axis Variations table
• Boring Expansion Spec — avar2 (HarfBuzz)
• MDN: Variable fonts guide
• chromestatus — Open Font Format avar2 (5169590743203840)
• Chromium tracking issue 40246300
• CSS Fonts 4 tech() definition
• chrome-platform-showcase — live demo