Browser Test: font-style for Slant axis in OpenType variable fonts

A test page to determine whether browsers meet the CSS Spec for font-style.

Test: positive oblique in @font-face

@font-face {
  font-family: 'Inter';           /* has negative slnt values, per OT spec */
  font-weight: 100 900;
  font-style: oblique 0deg 10deg; /* has positive top value, per CSS spec */
  src: url('fonts/Inter.var.ttf');
}

All following elements should be clockwise-slanted (“forward-leaning”), except for font-style: oblique -10deg;, which provides a value outside the font's Slant axis range.

font-variation-settings: 'slnt' -10;

Should have a clockwise slant

font-style: oblique;

Should have a clockwise slant

font-style: oblique 10deg;

Should have a clockwise slant

font-style: italic;

Should have a clockwise slant

<i>

Should have a clockwise slant

font-style: oblique -10deg;

Incorrect for most fonts unless they include a “backslant”

Test: negative oblique in @font-face (incorrect for most fonts)

@font-face {
  font-family: 'Inter2';
  font-weight: 100 900;
  font-style: oblique 0deg -10deg; /* wrong for clockwise slant */
  src: url('fonts/Inter.var.ttf');
}

The above code should only apply to a “backslanted” font with a counter-clockwise Slant axis of 0 to (+)10. For a clockwise-slant, the font-style declaration above is incorrect.

font-variation-settings: 'slnt' -10;

Should have a clockwise slant

font-style: oblique -10deg;

Incorrect for clockwise-slanting font

Expected behavior

Variable fonts with negative, clockwise-sloping Slant axis values should be possible to control via CSS with a positive value of oblique (CSS Spec, font-style). For example, CSS such as font-style: oblique 10deg; should result in clockwise-slanting text when the font has a slnt axis with values 0 to -10 (as required by the OpenType spec: “a typical, right-leaning oblique design will have a negative slant value”).

Additionally, font-style:italic should activate the Slant axis if an Italic axis is not present. Per the CSS Spec: “Italic: Matches against a font that is labeled as an italic face, or an oblique face if one does not exist ...For TrueType / OpenType fonts that use variations, the slnt variation is used to implement oblique values.”

Results as of Jan 30, 2020

All tested browsers support font-variation-settings: 'slnt' -10, but accurate support for font-style: oblique and font-style: italic is sparse. As tested on macOS, Windows, iOS, and Android:

Note: both Chrome and Firefox appear to work well if a variable font has a clockwise slant with a *positive* value; however, fonts using this approach contradict the OpenType spec and therefore do not provide a valid test case.