Inter variable font test
Tests how the Inter 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.
Effective font-family:
Known issues with variable fonts:
-
Most browsers as of August 2019:
-
Mapping of negative slant axis to font-style:italic has no effect.
-
Mapping of negative slant axis to font-style:oblique has no effect.
-
All current stable versions of major web browser supports
format("woff2-variations")
for font url format in @font-face declarations.
-
Safari:
-
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.
(Last confirmed version: Safari 12.1)
-
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.
(Last confirmed version: Safari 12.1)
-
Chrome:
-
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.
-
Passing explicit degrees to oblique (e.g. font-style:oblique -5deg)
is not supported. (Last confirmed version: Chrome 75)
-
For fonts with negative slnt values, as per the OT spec,
font-style:oblique has no effect (not mapped to negative max of slnt axis.)
(Last confirmed version: Chrome 75)
-
Mapping of negative-value ital and slnt axis
to font-style:italic is not supported.
-
Version <75: Mapping of positive-value ital and slnt axis
to font-style:italic is not supported.
-
Windows only: 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".
(Last confirmed version: Chrome 69)
-
Firefox:
-
For fonts with negative slnt values, as per the OT spec,
font-style:oblique has no effect (not mapped to negative max of slnt axis.)
(Last confirmed version: Firefox 68)
-
Version <68: Mapping of ital axis to font-style:italic
is not supported.
-
Edge:
-
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 roman 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.
(Last confirmed version: Edge 42)