Inter UI variable font test
Tests how the Inter UI variable font is rendered by the web browser
with the traditional style properties font-weight and
font-style.
We can always use font-variation-settings to gain full control
over variable font axes, which works as expected in all major browsers.
This document does not make use of font-variation-settings.
Known issues:
-
Safari 12.0:
Defining font-weight in @font-face causes
slnt axis to be maxed out by default, causing font-style:normal
to be fully slanted/oblique/italic. This is counter-acted by using a
specific @font-face for Safari that doesn't define
font-weight.
-
Safari 12.0:
font-synthesis:none is required or else
font-style:italic causes "double-slant" —
the slnt axis gets maxed out as expected, but then faux oblique is
applied on top of it, causing an overly extreme slant.
This means that font-style:italic can't be used in Safari,
and instead we use font-style:oblique which works in all
major browsers. Note that this effects <em> and
<i> which in Safari implicitly has
font-style:italic.
-
Chrome 69: Mapping of ital axis to font-style:italic
is not supported.
-
Firefox 62: Mapping of ital axis to font-style:italic
is not supported.
-
Edge 42: Mapping of ital axis to font-style:italic
is not supported, nor is Mapping of slnt axis to font-style:oblique. Note: We use separate italic and upright font files for Edge in this
test, which is why intermediate oblique degrees are displayed as either
fully slanted or not slanted at all when viewing this in Edge.