Italic font rendered with exaggerated slant




2 years ago
2 years ago


(Reporter: timbugzilla, Unassigned)


Windows 10

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [gfx-noted], URL)


(3 attachments)



2 years ago
Created attachment 8826875 [details]
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.


2 years ago
Component: General → Graphics: Text
Product: Firefox → Core

Comment 1

2 years ago
Created attachment 8826877 [details]
Chrome 55.0.2883.87 m (64-bit) Rendering

Comment 2

2 years ago
Created attachment 8826878 [details]
MS Edge rendering

Comment 4

2 years ago
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

2 years ago
Does it make sense for FF to take Chrome's approach?
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).

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. :)
Priority: -- → P5
Whiteboard: [gfx-noted]
You need to log in before you can comment on or make changes to this bug.