Description
Implementation of CSS Spec for font-style for variable fonts with either Slant or Italic axes.

Specification
CSS Spec for font-style

Tests
Links to web-platform-tests (on https://wpt.fyi) for the feature (this can be all tests, not a curated list): none, but https://arrowtype.github.io/vf-slnt-test/ (three test fonts are provided)

Rationale

The only style that works with a variable font with slnt or ital axis is the low-level control font-variation-settings.

The following styles and elements are only correctly supported (minus one detail, see https://arrowtype.github.io/vf-slnt-test/) by Firefox:

• <i> element
• font-style: italic;
• font-style: oblique;
• font-style: oblique XXdeg;
• font-style: oblique -XXdeg;

Due to poor support, Google Fonts chose to stop releasing fonts with ital or slnt axis:

• Support for Italic axis on API?
• [spec] How to handle slant axis in STAT table
• Axis Registry: slant axis
• Inter fonts lacks italics.

Example of advice given by a site aimed at web developers:

Due to some inconsistencies with how browsers handle variable font files that contain both italic and upright variants (and also files that contain both italic and slant axes), in these scenarios it’s best to omit the font-style line completely.
https://variablefonts.io/implementing-variable-fonts/

Relevant browser issues:

• Chromium Issue 1064756: "font-style: italic doesn't activate the ital axis of variable fonts"
• WebKit Bugs #209565: "Variable fonts with 'slnt' or 'ital' axes are not rendered correctly with font-style:italic, etc"

Relevant specification issues:

• [css-fonts-4] Behavior for variable fonts with 'ital' axis ambiguous / underspec'ed (regarding a lack of clarification in the CSS specs on what to do with font-style: oblique XXdeg; and a font that has only an ital axis)

Glossary:

• Italic axis (ital)
• Slant axis (slnt)

Specifications:

• OpenType® Specification
• CSS Fonts Module Level 3:

italic
selects a font that is labeled as an italic face, or an oblique face if one is not
oblique
selects a font that is labeled as an oblique face, or an italic face if one is not