css.properties.font-style - Chrome doesn't seem to fully support

[ronikarjalainen]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

Chrome is shown as fully supporting font-style, but it seems to me it might be only partial support.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet)

What did you expect to see?

I expected to font-style: oblique {N}deg to work in Chrome like it works in Firefox. It does not seem to.

Screenshot from Firefox:

Screenshot from Chrome:

In both cases the relevant CSS of the example is font-style: oblique 40deg;. The behaviour is vastly different.

Did you test this? If so, how?

I tried out the last example in the variable fonts section here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style#variable_fonts (it takes you to MDN Playground).

With Firefox, a wide variety of font-style: oblique degree values works. With Chrome font-style: oblique 14deg and above (up to 90 degrees) produce oblique text, any other value produces normal text.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

This is the page that claims that Chrome fully supports this feature: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

You can test it yourself using the example provided on that page. I'd imagine reproducing this should take a minute or two. Open the Playground link, tweak the degrees in the CSS section of the example, and see how your various browsers react.

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

MDN metadata

MDN page report details

• Query: css.properties.font-style
• Report started: 2025-06-13T10:47:46.431Z

[caugner]

I tested this example locally in Chrome 137, Firefox 139, and Safari 18.5:

• In Chrome and Safari, font-style: oblique 10deg has the same effect as font-style: normal, and everything between font-style: oblique 14deg and font-style: oblique 90deg has the same effect as font-style: oblique.
• In Firefox, only font-style: oblique 0deg has the same effect as font-style: normal, and every degree up to font-style: oblique 90deg changes the output.

While I couldn't find a corresponding Chrome issue, Safari has related WebKit issues:

• oblique angle treated as binary switch
• getComputedStyle() of "font-style: oblique 35deg" doesn't return "oblique 35deg"

In BCD, we should mark the Chrome and Safari statements for this feature with partial_implementation along with notes explaining the behavior described above, and pointing to Chrome and Safari bugs.

@ronikarjalainen Could you please file a new Chromium issue for this so that we can reference it here in BCD? 🙏 And would you like to open a PR with these BCD changes?

[ronikarjalainen]

Okay. I'll file the issue once I'm not blanking on my google password. And sure, I can do a PR as well. I'll try and read the instructions first.

[ronikarjalainen]

I searched for some bug reports myself and found some... stuff.

• An issue created based on CSS Working Group's decision to disallow fallback from oblique to italic and to synthesize oblique when requested: https://issues.chromium.org/issues/393389580
• An issue about slanting glyphs to the left not working: https://issues.chromium.org/issues/40065409
• A W3 tests page, where Gecko passes two of the three tests, while Blink and Webkit fail: http://w3.org/International/i18n-tests/results/int-letterforms.html
• Also a bug report about Chrome behaving even more weirdly: https://issues.chromium.org/issues/40788851

On the test page provided in that issue: https://output.jsbin.com/juyawoh if I tweak the degrees of the property relevant to the font-style: oblique -15deg box followingly (in Chrome):

• the default value of -15 that's set on the page slants all characters to the left, as well as does any negative value from -90 to -1. Remarkably the latin characters and numerals are actually slanted.
• value of 0 produces normal text - none of the latin characters, numerals or logograms are slanted in any way
• values from 1 to 13 only slant the latin characters and numerals (by turning them to italic)
• values of exactly 14 slants all of the characters (latin characters and numerals become italic)
• values from 15 to 90 slant none of the characters

The angle of the slant doesn't vary, it's just left, right or none. In Firefox the logograms are slanted to the degree, while latin characters and arabic numerals seem to become italics.

Anyway... For Chrome and Safari, is it really a partial implementation even? Seems to me they check the angle and make it either font-style: normal or font-style: italic based on the provided degree. I mean, sure, it doesn't break, but that's nowhere near the intended behaviour.

I also didn't get font-synthesis-style to do anything at all in Chrome so far, but that's a whole another issue and might require more testing.

What weirds me out the most is that all browsers, even Firefox, seem to fall back from oblique to italic sometimes. Oblique and italic are supposed to be two very distinct things. Like so:

[caugner]

Thanks, those are all great findings, and will be helpful for anybody stumbling upon this issue. Note that for BCD data we strive to be concise, rather than capturing all the details of browser bugs.

For Chrome and Safari, is it really a partial implementation even? Seems to me they check the angle and make it either font-style: normal or font-style: italic based on the provided degree. I mean, sure, it doesn't break, but that's nowhere near the intended behaviour.

Yes, we consider this a partial implementation, because angles do have an effect, and CSS.supports() will also return true.

What weirds me out the most is that all browsers, even Firefox, seem to fall back from oblique to italic sometimes. Oblique and italic are supposed to be two very distinct things.

It looks like this was reported in Firefox bug 1303580, and one comment mentions spec issue https://github.com/w3c/csswg-drafts/issues/514 (closed), which was mentioned more recently by https://github.com/w3c/csswg-drafts/issues/9389 (opened).

If you can provide specific minimal examples to reproduce inconsistent behavior between Chrome, Firefox, and Safari with regards to font synthesis and fallback from oblique to italic, please open a separate BCD issue with your findings. We might want to capture this as a behavioral subfeature in BCD, especially if the specs have changed as an outcome of those spec issues above. 🙏

[ronikarjalainen]

Here's the Chromium issue: https://issues.chromium.org/issues/425388876

Here's the PR: https://github.com/mdn/browser-compat-data/pull/27083

About the other stuff... We'll see, maybe I'll have time to do more testing at some point.