Browser Test: font-style
for Slant axis in OpenType variable fonts
A test page to determine whether browsers meet the CSS Spec for font-style.
Test: positive oblique in @font-face
@font-face { font-family: 'Inter';/* has negative slnt values, per OT spec */ font-weight: 100 900; font-style: oblique 0deg 10deg;/* has positive top value, per CSS spec */ src: url('fonts/Inter.var.ttf'); }
All following elements should be clockwise-slanted (“forward-leaning”), except for font-style: oblique -10deg;
, which provides a value outside the font's Slant axis range.
font-variation-settings: 'slnt' -10;
Should have a clockwise slant
font-style: oblique;
Should have a clockwise slant
font-style: oblique 10deg;
Should have a clockwise slant
font-style: italic;
Should have a clockwise slant
<i>
Should have a clockwise slant
font-style: oblique -10deg;
Incorrect for most fonts unless they include a “backslant”
Test: negative oblique in @font-face
(incorrect for most fonts)
@font-face { font-family: 'Inter2'; font-weight: 100 900; font-style: oblique 0deg -10deg; /* wrong for clockwise slant */ src: url('fonts/Inter.var.ttf'); }
The above code should only apply to a “backslanted” font with a counter-clockwise Slant axis of 0 to (+)10. For a clockwise-slant, the font-style declaration above is incorrect.
font-variation-settings: 'slnt' -10;
Should have a clockwise slant
font-style: oblique -10deg;
Incorrect for clockwise-slanting font
Expected behavior
Variable fonts with negative, clockwise-sloping Slant axis values should be possible to control via CSS with a positive value of oblique (CSS Spec, font-style). For example, CSS such as font-style: oblique 10deg;
should result in clockwise-slanting text when the font has a slnt axis with values 0 to -10 (as required by the OpenType spec: “a typical, right-leaning oblique design will have a negative slant value”).
Additionally, font-style:italic
should activate the Slant axis if an Italic axis is not present. Per the CSS Spec: “Italic: Matches against a font that is labeled as an italic face, or an oblique face if one does not exist ...For TrueType / OpenType fonts that use variations, the slnt variation is used to implement oblique values.”
Results as of Jan 30, 2020
All tested browsers supportfont-variation-settings: 'slnt' -10
, but accurate support for font-style: oblique
and font-style: italic
is sparse. As tested on macOS, Windows, iOS, and Android:
- Chrome (81.0.4040.0), Android 9.0 Chrome, Edge 81 Beta: No support. Bug tracked at Chromium Issues #859869
- Safari (13.2, WebKit 15610.1.1), Safari iOS 13: No support. Applies faux-slant of 20deg. Bug tracked at WebKit Bugs #200369
- Firefox (72.0a1, 72.0.2): Closest to support, but only shows clockwise slant for a *negative* oblique value (opposite of what should happen, per CSS spec). Bug tracked at Firefox Bugs #1611997
- Opera (67): No support.
Note: both Chrome and Firefox appear to work well if a variable font has a clockwise slant with a *positive* value; however, fonts using this approach contradict the OpenType spec and therefore do not provide a valid test case.