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)