Inter variable font test
Tests how the Inter variable font is rendered by the web browser
with the traditional style properties font-weight and
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.
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-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
Chrome 69+: Mapping of ital axis to font-style:italic
is not supported.
Chrome 69+: Rendering of overlapping shapes causes "blobs" or "ink bleed".
Overlapping shapes, like the angle + horizontal stem of "A" are
rendered in separate MSAA passes and later combined as bitmaps,
causing a multiplication effect on the alpha channel.
Chrome 69+ (Windows): kerning is incorrect and
there are issues with ClearType where for example a lower-case "r"
(without hints) might be rendered much lower than a lower-case "n".
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.
This web browser does not support variable fonts