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: "Inter var experimental", sans-serif

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  and  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)

multi-axis

I 100 normal

I 100 oblique -5

I 100 oblique -10

I 100 oblique

I 100 italic

I 100 

I 100 

I 100 slnt -10

I 120 normal

I 120 oblique -5

I 120 oblique -10

I 120 oblique

I 120 italic

I 120 

I 120 

I 120 slnt -10

I 140 normal

I 140 oblique -5

I 140 oblique -10

I 140 oblique

I 140 italic

I 140 

I 140 

I 140 slnt -10

I 160 normal

I 160 oblique -5

I 160 oblique -10

I 160 oblique

I 160 italic

I 160 

I 160 

I 160 slnt -10

I 180 normal

I 180 oblique -5

I 180 oblique -10

I 180 oblique

I 180 italic

I 180 

I 180 

I 180 slnt -10

I 200 normal

I 200 oblique -5

I 200 oblique -10

I 200 oblique

I 200 italic

I 200 

I 200 

I 200 slnt -10

I 220 normal

I 220 oblique -5

I 220 oblique -10

I 220 oblique

I 220 italic

I 220 

I 220 

I 220 slnt -10

I 240 normal

I 240 oblique -5

I 240 oblique -10

I 240 oblique

I 240 italic

I 240 

I 240 

I 240 slnt -10

I 260 normal

I 260 oblique -5

I 260 oblique -10

I 260 oblique

I 260 italic

I 260 

I 260 

I 260 slnt -10

I 280 normal

I 280 oblique -5

I 280 oblique -10

I 280 oblique

I 280 italic

I 280 

I 280 

I 280 slnt -10

I 300 normal

I 300 oblique -5

I 300 oblique -10

I 300 oblique

I 300 italic

I 300 

I 300 

I 300 slnt -10

I 320 normal

I 320 oblique -5

I 320 oblique -10

I 320 oblique

I 320 italic

I 320 

I 320 

I 320 slnt -10

I 340 normal

I 340 oblique -5

I 340 oblique -10

I 340 oblique

I 340 italic

I 340 

I 340 

I 340 slnt -10

I 360 normal

I 360 oblique -5

I 360 oblique -10

I 360 oblique

I 360 italic

I 360 

I 360 

I 360 slnt -10

I 380 normal

I 380 oblique -5

I 380 oblique -10

I 380 oblique

I 380 italic

I 380 

I 380 

I 380 slnt -10

I 400 normal

I 400 oblique -5

I 400 oblique -10

I 400 oblique

I 400 italic

I 400 

I 400 

I 400 slnt -10

I 420 normal

I 420 oblique -5

I 420 oblique -10

I 420 oblique

I 420 italic

I 420 

I 420 

I 420 slnt -10

I 440 normal

I 440 oblique -5

I 440 oblique -10

I 440 oblique

I 440 italic

I 440 

I 440 

I 440 slnt -10

I 460 normal

I 460 oblique -5

I 460 oblique -10

I 460 oblique

I 460 italic

I 460 

I 460 

I 460 slnt -10

I 480 normal

I 480 oblique -5

I 480 oblique -10

I 480 oblique

I 480 italic

I 480 

I 480 

I 480 slnt -10

I 500 normal

I 500 oblique -5

I 500 oblique -10

I 500 oblique

I 500 italic

I 500 

I 500 

I 500 slnt -10

I 520 normal

I 520 oblique -5

I 520 oblique -10

I 520 oblique

I 520 italic

I 520 

I 520 

I 520 slnt -10

I 540 normal

I 540 oblique -5

I 540 oblique -10

I 540 oblique

I 540 italic

I 540 

I 540 

I 540 slnt -10

I 560 normal

I 560 oblique -5

I 560 oblique -10

I 560 oblique

I 560 italic

I 560 

I 560 

I 560 slnt -10

I 580 normal

I 580 oblique -5

I 580 oblique -10

I 580 oblique

I 580 italic

I 580 

I 580 

I 580 slnt -10

I 600 normal

I 600 oblique -5

I 600 oblique -10

I 600 oblique

I 600 italic

I 600 

I 600 

I 600 slnt -10

I 620 normal

I 620 oblique -5

I 620 oblique -10

I 620 oblique

I 620 italic

I 620 

I 620 

I 620 slnt -10

I 640 normal

I 640 oblique -5

I 640 oblique -10

I 640 oblique

I 640 italic

I 640 

I 640 

I 640 slnt -10

I 660 normal

I 660 oblique -5

I 660 oblique -10

I 660 oblique

I 660 italic

I 660 

I 660 

I 660 slnt -10

I 680 normal

I 680 oblique -5

I 680 oblique -10

I 680 oblique

I 680 italic

I 680 

I 680 

I 680 slnt -10

I 700 normal

I 700 oblique -5

I 700 oblique -10

I 700 oblique

I 700 italic

I 700 

I 700 

I 700 slnt -10

I 720 normal

I 720 oblique -5

I 720 oblique -10

I 720 oblique

I 720 italic

I 720 

I 720 

I 720 slnt -10

I 740 normal

I 740 oblique -5

I 740 oblique -10

I 740 oblique

I 740 italic

I 740 

I 740 

I 740 slnt -10

I 760 normal

I 760 oblique -5

I 760 oblique -10

I 760 oblique

I 760 italic

I 760 

I 760 

I 760 slnt -10

I 780 normal

I 780 oblique -5

I 780 oblique -10

I 780 oblique

I 780 italic

I 780 

I 780 

I 780 slnt -10

I 800 normal

I 800 oblique -5

I 800 oblique -10

I 800 oblique

I 800 italic

I 800 

I 800 

I 800 slnt -10

I 820 normal

I 820 oblique -5

I 820 oblique -10

I 820 oblique

I 820 italic

I 820 

I 820 

I 820 slnt -10

I 840 normal

I 840 oblique -5

I 840 oblique -10

I 840 oblique

I 840 italic

I 840 

I 840 

I 840 slnt -10

I 860 normal

I 860 oblique -5

I 860 oblique -10

I 860 oblique

I 860 italic

I 860 

I 860 

I 860 slnt -10

I 880 normal

I 880 oblique -5

I 880 oblique -10

I 880 oblique

I 880 italic

I 880 

I 880 

I 880 slnt -10

I 900 normal

I 900 oblique -5

I 900 oblique -10

I 900 oblique

I 900 italic

I 900 

I 900 

I 900 slnt -10

single-axis

I 100 normal

I 100 oblique

I 100 italic

I 100 

I 100 

I 120 normal

I 120 oblique

I 120 italic

I 120 

I 120 

I 140 normal

I 140 oblique

I 140 italic

I 140 

I 140 

I 160 normal

I 160 oblique

I 160 italic

I 160 

I 160 

I 180 normal

I 180 oblique

I 180 italic

I 180 

I 180 

I 200 normal

I 200 oblique

I 200 italic

I 200 

I 200 

I 220 normal

I 220 oblique

I 220 italic

I 220 

I 220 

I 240 normal

I 240 oblique

I 240 italic

I 240 

I 240 

I 260 normal

I 260 oblique

I 260 italic

I 260 

I 260 

I 280 normal

I 280 oblique

I 280 italic

I 280 

I 280 

I 300 normal

I 300 oblique

I 300 italic

I 300 

I 300 

I 320 normal

I 320 oblique

I 320 italic

I 320 

I 320 

I 340 normal

I 340 oblique

I 340 italic

I 340 

I 340 

I 360 normal

I 360 oblique

I 360 italic

I 360 

I 360 

I 380 normal

I 380 oblique

I 380 italic

I 380 

I 380 

I 400 normal

I 400 oblique

I 400 italic

I 400 

I 400 

I 420 normal

I 420 oblique

I 420 italic

I 420 

I 420 

I 440 normal

I 440 oblique

I 440 italic

I 440 

I 440 

I 460 normal

I 460 oblique

I 460 italic

I 460 

I 460 

I 480 normal

I 480 oblique

I 480 italic

I 480 

I 480 

I 500 normal

I 500 oblique

I 500 italic

I 500 

I 500 

I 520 normal

I 520 oblique

I 520 italic

I 520 

I 520 

I 540 normal

I 540 oblique

I 540 italic

I 540 

I 540 

I 560 normal

I 560 oblique

I 560 italic

I 560 

I 560 

I 580 normal

I 580 oblique

I 580 italic

I 580 

I 580 

I 600 normal

I 600 oblique

I 600 italic

I 600 

I 600 

I 620 normal

I 620 oblique

I 620 italic

I 620 

I 620 

I 640 normal

I 640 oblique

I 640 italic

I 640 

I 640 

I 660 normal

I 660 oblique

I 660 italic

I 660 

I 660 

I 680 normal

I 680 oblique

I 680 italic

I 680 

I 680 

I 700 normal

I 700 oblique

I 700 italic

I 700 

I 700 

I 720 normal

I 720 oblique

I 720 italic

I 720 

I 720 

I 740 normal

I 740 oblique

I 740 italic

I 740 

I 740 

I 760 normal

I 760 oblique

I 760 italic

I 760 

I 760 

I 780 normal

I 780 oblique

I 780 italic

I 780 

I 780 

I 800 normal

I 800 oblique

I 800 italic

I 800 

I 800 

I 820 normal

I 820 oblique

I 820 italic

I 820 

I 820 

I 840 normal

I 840 oblique

I 840 italic

I 840 

I 840 

I 860 normal

I 860 oblique

I 860 italic

I 860 

I 860 

I 880 normal

I 880 oblique

I 880 italic

I 880 

I 880 

I 900 normal

I 900 oblique

I 900 italic

I 900 

I 900 