Bug 209565 – Variable fonts with 'slnt' or 'ital' axes are not rendered correctly with font-style:italic, etc

• Component: Text
• Status: NEW

[Stephen Nixon]

Created attachment 394549 [details]
Screenshot of a test site for this issue

There is a collection of closely-related issues in the handling of variable fonts with either Slant (slnt) or Italic (ital) axes.

A test page detailing issues has been created here: https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests/index.html

---

For fonts with a 'slnt' axis, issues include:

• font-style:italic; & font-style:oblique; & <i> doesn't activate max clockwise (negative) slant, but rather, synthesizes a slant

• font-style:oblique XXdeg; doesn't correctly flip the positive/negative value when requesting font slnt, so fonts that follow the OpenType spec (using negative values for clockwise slant) do not work correctly. Additionally, fonts with a positive,  a counter-clockwise "backslant" cannot be activated.


For fonts with an 'ital' axis, issues include:

• font-style:italic; or <i> will activate the ital axis, PLUS incorrectly add a synthesized extra 20 degrees of slant

• font-style:oblique; doesn't activate ital=1, but rather, synthesizes a slant

---

There are two semi-related issues, but the linked-to test page attempts to better capture the range of related problems.

• https://bugs.webkit.org/show_bug.cgi?id=200369, "Slanted text in variable fonts is not rendered correctly"

• and maybe https://bugs.webkit.org/show_bug.cgi?id=189483, "Fonts which understand the 'ital' axis get synthetic italics"

[Radar WebKit Bug Importer]

<rdar://problem/60898228>

[Myles C. Maxfield]

Is this a duplicate of https://bugs.webkit.org/show_bug.cgi?id=189483 ?

[Stephen Nixon]

> Is this a duplicate of https://bugs.webkit.org/show_bug.cgi?id=189483 ?

No; this describes a fuller picture of the issues with font-style and variable fonts. 

I found that issue before filing this, and it is perhaps one part of this bug. However, I am confused by the comment there that “we erroneously apply synthetic bold.” I don’t see synthetic bold being applied in my test cases, only synthetic italics.  Did you intend to say “we erroneously apply synthetic italic”? If so, then that issue definitely falls under this issue's umbrella. However, this issue also describes the cases of how font-style should act for fonts with a 'slnt' axis.

[Ernst]

This should really be fixed. At the minimum, I would assume if a variable font has an "ital" axis, `font-style: italic` should use it and not apply aditional slanting.

[Kit Grose]

It's probably arguable as to whether or not a @font-face declaration that specifically (or implicitly) sets font-style: normal _should_ get real italics applied, it definitely differs from the behaviour in other browsers.

In my testing you can work around this issue (at least in Safari 18.3) by adding a second @font-face declaration with the same source and font-style: italic, or by setting font-synthesis: none in any selectors that use the font in italics (e.g. an em selector or equivalent).

The synthesised italic's angle is (in my opinion) perversely extreme, which definitely introduces a legibility issue when WebKit falls back on it, so it's probably a reasonable expectation that @font-face declarations using variable typefaces should be rendered as per the designer's intent by default (as in other browsers).

[Stephen Nixon]

Unfortunately, I can’t get either of the above workarounds to work simultaneously in both WebKit and Chromium. If there is a way to do so, that would be great news!

For now, I’m just advising folks to use split-out roman vs italic variable fonts. It would be very nice if WebKit is able to fix the issue someday, though. 🙏