Getting bent: the current state of Italics in variable font support

One of the key objectives in the creation of the variable font specification was interoperability with static fonts, no matter where they’re used. If accomplished, that would mean on the web that a variable font with a weight axis and a ‘regular’ weight value of 400 would automatically map to that point on the axis when given CSS attribute/value of ‘font-weight: normal’. Likewise if there is a width axis with a value of 100 that corresponds to the normal width, that is what would be displayed when the corresponding ‘font-stretch: normal’ is supplied. Or in both cases, if nothing is specified, those would be the default values. And indeed, both of these work as intended in all the shipping browsers that support variable fonts.

But not so with Italics.

Two wrongs and a right: three different ways to specify Italics, three different results. And every in three browsers, three completely different combinations of results

The format supports having both Roman and Italics in a single file, though some feel that there is enough differentiation in glyphs between the two that it may be more efficient to split them into separate files. It’s easy enough to set up either way, but in both cases what should happen is that the Italic axis should map to the ‘font-style’ attribute, meaning that if you specify ‘font-style: italic’ that should tell the browser to render the font with the Italic axis set to 1 instead of 0. The trouble is, it doesn’t actually work. At least…