Testing browser support for slnt and ital axes in variable fonts
The following is a test page to determine whether browsers meet the CSS Spec for font-style. It includes a current testing table, as well as historical data for browser results.
Test table for your current browser
Notes:
- Control tests / expected results are in pink. If you see mismatched overlap and pink in a table cell, that test is failing in your current browser. If you don’t see pink in a cell, that test is performing as expected (and therefore covering the background control).
- If you’re like to test a font locally, click its icon to download it. Two useful font testing tools are Font Goggles and Wakamai Fondue.
- A test can fail in two primary ways:
- The slant can be wrong – either too little too much.
- The font can be missing required alternates for the given style (Required Variation Alternates,
rvrn). In this case, the slant might be correct, but the letterforms are incorrect. For example, the expected result may have a single-story a and italic f, while the actual test result has a slanted double-story a and monospace f.
| Style Tested | |||
|---|---|---|---|
font-variation-settings
(Control tests – should have no visible pink background text.) Low-level control of variable font axes.
Works well in most modern browsers.
|
varfont
varfont
'slnt' -15;
|
varfont
varfont
'ital' 1;
|
varfont
varfont
'slnt' 15;
|
font-style: italic;
"Matches against a font that is labeled as an italic face, or an oblique face if one does not exist."
CSS Fonts 4
|
varfont
varfont
|
varfont
varfont
|
varfont
varfont
|
font-style: oblique;
"Selects a font that is labeled as an oblique face, or an italic face if one is not ... The lack of an angle represents 14deg."
CSS fonts 3
|
varfont
varfont
|
varfont
varfont
|
varfont
varfont
|
font-style: oblique 10deg;
"Positive angles represent a clockwise slant; negative angles represent a counter-clockwise slant." (The “10deg” value should be flipped to -10 for a slnt axis.)
CSS fonts 4
|
varfont
varfont
|
varfont
varfont
|
varfont
varfont
|
|
"Selects a font that is labeled as an oblique face, or an italic face if one is not."
CSS fonts 3 The
<em> tag may work differently
depending on the language.
|
varfont
varfont
|
varfont
varfont
|
varfont
varfont
|
font-style: oblique -10deg;
Rare case; will only work with fonts that include "backslanted" styles. "Negative angles represent a counter-clockwise slant."
CSS fonts 4.
|
varfont
varfont
|
varfont
varfont
|
varfont
varfont
|
Browser testing results, as of November 8, 2022
Notes:
- The following tests were performed on a 2019 MacBook Pro, with an Intel chip and macOS 12.5 (Monterey), if that is relevant.
- Chrome has significantly improved in this testing, from previous rounds.
- Safari has improved on one test,
font-style: oblique -10deg;. - Firefox has seemingly not changed support here, but they were already ahead of the curve for support.
- See historical data further below or in the original testing page.
- The CSS Level 4 spec is unclear what should be done for the value
font-style: oblique ±XXdegin a variable font which only has anitalaxis or aslntaxis that doesn’t include the requested value. As of these tests, Firefox applies a synthetic slant, while Safari & Chrome apply no slant. And thus, this test is rated as 🤷 for all three browsers. (Author’s loosely-held opinion: it is probably better to not add synthetic slant here, as this can be especially problematic in scripts other than Latin. Perhaps, oblique with a given slant should engage'ital' 1. If a user really wants a syntethic slant, they could usetransform: skew(XXdeg).
Chrome – Canary, Version 109.0.5408.0 (x86_64)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
✅ |
❌ |
✅ |
font-style: oblique;
|
✅ |
❌ |
✅ |
font-style: oblique 10deg;
|
✅ |
🤷 |
✅ |
|
|
✅ |
❌ |
✅ |
font-style: oblique -10deg;
|
✅ |
🤷 |
✅ |
Safari – Technology Preview, Release 157 (Safari 16.4, WebKit 17615.1.11.7)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
❌ |
❌ |
❌ |
font-style: oblique;
|
❌ |
❌ |
❌ |
font-style: oblique 10deg;
|
❌ |
🤷 |
❌ |
|
|
❌ |
❌ |
❌ |
font-style: oblique -10deg;
|
✅ |
🤷 |
❌ |
Firefox – Nightly, 108.0a1 (2022-11-03)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
✅ |
✅ |
✅ |
font-style: oblique;
|
✅ |
❌ |
✅ |
font-style: oblique 10deg;
|
✅ |
🤷 |
✅ |
|
|
✅ |
✅ |
✅ |
font-style: oblique -10deg;
|
✅ |
🤷 |
✅ |
Historical browser results
Historical results as of September 14, 2022 (Click to expand)
Notes as of testing time:
- The following tests were performed on a 2019 MacBook Pro, with an Intel chip and macOS 12.5, if that is relevant.
- Safari and Firefox have seemingly not changed support here, since prior testing in March 2020. Chrome appears to have regressed. See historical data further below or in the original testing page.
- The CSS Level 4 spec is unclear what should be done for the value
font-style: oblique ±XXdegin a variable font which only has anitalaxis or aslntaxis that doesn’t include the requested value. As of these tests, Firefox applies a synthetic slant, while Safari & Chrome apply no slant. And thus, this test is rated as 🤷 for all three browsers. (Author’s loosely-held opinion: it is probably better to not add synthetic slant here, as this can be especially problematic in scripts other than Latin. Perhaps, oblique with a given slant should engage'ital' 1. If a user really wants a syntethic slant, they could usetransform: skew(XXdeg).
Chrome – Canary, Version 107.0.5301.0 (x86_64)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
❌ |
❌ |
❌ |
font-style: oblique;
|
❌ |
❌ |
❌ |
font-style: oblique 10deg;
|
✅ |
🤷 |
✅ |
|
|
❌ |
❌ |
❌ |
font-style: oblique -10deg;
|
✅ |
🤷 |
✅ |
Safari – Technology Preview, Release 149 (Safari 16.0, WebKit 17614.1.19.1.5)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
❌ |
❌ |
❌ |
font-style: oblique;
|
❌ |
❌ |
❌ |
font-style: oblique 10deg;
|
❌ |
🤷 |
❌ |
|
|
❌ |
❌ |
❌ |
font-style: oblique -10deg;
|
❌ |
🤷 |
❌ |
Firefox – Nightly, 106.0a1 (2022-09-14)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
✅ |
✅ |
✅ |
font-style: oblique;
|
✅ |
❌ |
✅ |
font-style: oblique 10deg;
|
✅ |
🤷 |
✅ |
|
|
✅ |
✅ |
✅ |
font-style: oblique -10deg;
|
✅ |
🤷 |
✅ |
Historical results as of March 24, 2020 (Click to expand)
Notes:
- These test results are copied over from an earlier testing page. They have been reformatted here for (hopefully) more clarity.
Chrome – Canary, Version 83.0.4094.0
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
✅ |
❌ |
✅ |
font-style: oblique;
|
✅ |
❌ |
✅ |
font-style: oblique 10deg;
|
✅ |
🤷 |
✅ |
|
|
✅ |
❌ |
✅ |
font-style: oblique -10deg;
|
✅ |
🤷 |
✅ |
Safari – Technology Preview, Release 102 (Safari 13.2, WebKit 15610.1.5.2)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
❌ |
❌ |
❌ |
font-style: oblique;
|
❌ |
❌ |
❌ |
font-style: oblique 10deg;
|
❌ |
🤷 |
❌ |
|
|
❌ |
❌ |
❌ |
font-style: oblique -10deg;
|
❌ |
🤷 |
❌ |
Firefox – Nightly, Version 76.0a1 (2020-03-23)
| Style Tested | Font with slnt, 0 to -15 |
Font with ital, 0 to 1 |
Font with slnt, 15 to -15 |
|---|---|---|---|
font-variation-settings
|
✅ |
✅ |
✅ |
font-style: italic;
|
✅ |
✅ |
✅ |
font-style: oblique;
|
✅ |
❌ |
✅ |
font-style: oblique 10deg;
|
✅ |
🤷 |
✅ |
|
|
✅ |
✅ |
✅ |
font-style: oblique -10deg;
|
✅ |
🤷 |
✅ |