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. If a font uses avar2 internally, Chrome 148+ will honour its axis relationship tables automatically when you use font-variation-settings or higher-level font-feature properties.

Example: 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 (CSS)

Chrome 148 added support via tech(avar2) in @font-face src::

@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)
• chrome-platform-showcase — live demo