1331220 - Italic font rendered with exaggerated slant

Status: UNCONFIRMED

(Core :: Graphics: Text, defect, P5)

Description

[timbugzilla]

Attachment: Firefox Nightly rendering

EB Garamond Italic font is rendered with an exaggerated slant, harming legibility and text spacing. 

This does not occur with Chrome or MS Edge.

2017-01-14 x64 Nightly on Win10 x64. Tested with a fresh default profile.

https://www.currentaffairs.org/2017/01/how-pundits-get-everything-wrong-and-still-keep-their-jobs

Comment 1

[timbugzilla]

Attachment: Chrome 55.0.2883.87 m (64-bit) Rendering

Comment 2

[timbugzilla]

Attachment: MS Edge rendering

Comment 3

[timbugzilla]

The italic EB Garamond font seems to be TTF. 

https://www.currentaffairs.org/static/1479395477/fonts/EBGaramondItalic.ttf

The regular EB Garamond body text font is WOFF2.

https://fonts.gstatic.com/s/ebgaramond/v7/kYZt1bJ8UsGAPRGnkXPeFY4P5ICox8Kq3LLUNMylGO4.woff2

Comment 4

[Alex]

The site's wrong because it's declaring the italic font to not be italic, then asking the browser to synthesize it (Which Firefox does, leading to too much slanting here), but it works in Chrome (Not sure about Edge) since it seems to read the style from the font itself and if it matches they bypass the synthesis step.

Comment 5

[timbugzilla]

Does it make sense for FF to take Chrome's approach?

Comment 6

[Jonathan Kew [:jfkthame]]

No. The CSS Fonts spec[1] is pretty clear about this:

"The value for these font face style attributes is used in place of the style implied by the underlying font data. This allows authors to combine faces in flexible combinations, even in situations where the original font data was arranged differently. User agents that implement synthetic bolding and obliquing must only apply synthetic styling in cases where the font descriptors imply this is needed, rather than based on the style attributes implied by the font data."

So if the EBGaramondItalic.ttf face is loaded with the descriptor 'font-style: normal' (or with no 'font-style' descriptor, in which case the initial value is assumed), then the face is _not_ considered to be italic, and Firefox is correct to apply synthetic slanting when it used in a context with the 'font-style: italic' property (e.g. in the <i> element).

[1] https://www.w3.org/TR/css-fonts-3/#font-prop-desc

Comment 7

[Jonathan Kew [:jfkthame]]

Therefore, I would suggest filing a bug against Chrome.

BTW, I just tried Safari on macOS, and it applies additional slanting, like Firefox. So we're not alone in following the spec here. :)