UPDATE: there is an updated set of tests made for September 2022

Browser Test: font-style for slnt and ital axes in OpenType Variable Fonts

A test page to determine whether browsers meet the CSS Spec for font-style for variable fonts with either Slant or Italic axes.

Test method

Three fonts have been made that are similar, but which handle "italics" in different ways that are all possible within the OpenType spec. In general, the simple way to see whether italics are being properly applied is to notice whether "cursive" alternates are being activated, such as the single-story g and the f with a descender. A few tests fail more subtly in Webkit, where alternates are activated, but letters are slanted incorrectly.

Browsers tested (March 24, 2020)


Note: in the table below, you can hover over each browser icon for a note about what is specifically correct or incorrect in the implementation.

Property/Declaration Font w/ slnt axis, 0 to -15 Font w/ ital axis only Font w/ slnt axis, 15 to -15
font-variation-settings
Low-level control of variable font axes. Works well in all modern browsers.
'slnt' -15;
argvfonts
'ital' 1;
argvfonts
'slnt' 15;
argvfonts
font-style: italic;
"Matches against a font that is labeled as an italic face, or an oblique face if one does not exist." CSS Fonts 4
argvfonts
argvfonts
argvfonts
font-style: oblique;
"Selects a font that is labeled as an oblique face, or an italic face if one is not." CSS fonts 3
argvfonts
argvfonts
argvfonts
font-style: oblique 10deg;
"Positive angles represent a clockwise slant; negative angles represent a counter-clockwise slant." CSS fonts 4
argvfonts
argvfonts
argvfonts
<i>
"Selects a font that is labeled as an oblique face, or an italic face if one is not." CSS fonts 3 The <em> tag may work differently depending on the language.
argvfonts
argvfonts
argvfonts
font-style: oblique -10deg;
Rare case; will only work with fonts that include "backslanted" styles. "Negative angles represent a counter-clockwise slant." CSS fonts 4.
argvfonts
argvfonts
argvfonts

Unresolved case: what should happen for oblique XXdeg and fonts that have an ital axis?

The CSS Spec isn't clear what should happen for oblique XXdeg with fonts that have an ital axis. Three possible results would be:

  1. No change applied.
  2. Artificial skew applied.
  3. Italic style activated, with full slope. This would make it equivalent to oblique with no specified angle.

The ital axis doesn't support degree-based slanting, so it may be misleading to render such fonts with a slant. On the other hand, users may wish to skew text while keeping the behavior of text, so transform: skewX() wouldn't work, as it skews an entire element's overall "box".

Ultimately, this is a separate issue, and something that should be determined by the CSS Working Group.

Relevant browser issues