Firefox renders font Schehezarade strangely when using commas in Latin
Categories
(Core :: Layout: Text and Fonts, defect, P3)
Tracking
()
People
(Reporter: daviddlowe.flimm, Unassigned)
References
Details
Attachments
(2 files)
buggy.png
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:72.0) Gecko/20100101 Firefox/72.0
Steps to reproduce:
The commas in the Scheherazade font renders strangely Firefox. Scheharazade is font provided by Google Fonts and is one of the few good Arabic fonts. This bug may be because of a problem in the font file, however, other browsers do not manifest this bug.
Take this HTML:
<!DOCTYPE html>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Scheherazade&display=swap" rel="stylesheet">
<style>p { font-family: 'Scheherazade', serif; }</style>
<p>One, two, three, four.</p>
In browsers like Firefox (Windows and Linux), it gets rendered like in this screenshot buggy.png.
As you can see, the commas are rendered in the wrong position, they are rendered too high up. Also, the spacing after the comma is missing.
However, in browsers like Chrome (Windows and Linux), it renders correctly like in this screenshot: "not buggy.png"
I've only noticed this issue when using text in the Latin alphabet, not in the Arabic script.
I've tested this in Firefox 72.0.1 and in Firefox Developer Edition 74.0b1 in a new profile.
|
Reporter | |
Comment 1•4 years ago
|
||
|
||
Updated•4 years ago
|
|
||
Comment 2•4 years ago
|
||
I can confirm I see the same issue (on macOS), if Scheherazade is installed locally on my system (so that the Google Fonts @font-face rule ends up using my installed copy via src:local(...)).
If I disable my locally-installed copy of Scheherazade (and restart the browser), then it renders as expected (using the font resource fetched from Google Fonts).
Very weird!
|
|
||
Comment 3•4 years ago
|
||
Ah, I see ... it appears this is a bug in the font, but only in its Graphite layout behavior. If you set gfx.font_rendering.graphite.enabled to false in about:config, the problem disappears, as we then use the OpenType layout tables. Chrome doesn't support Graphite rendering, so the problem doesn't show up there.
And the problem doesn't occur when using the font served by Google Fonts (rather than a locally-installed copy) because Google serves a copy of the font where the Graphite tables have been removed.
Further confirmation: I see the same bad result if I use the font in LibreOffice (which does support Graphite).
So this is not a Firefox bug, it's a font bug; I'll let the SIL team responsible for Scheherazade know about it. Meanwhile, as a workaround you can disable Graphite in Firefox as mentioned above.
|
|
||
Comment 4•4 years ago
|
||
FTR, I have emailed some folk at SIL, so hope they'll be able to take care of this in a future font release.
|
|
Reporter | |
Comment 5•4 years ago
|
||
Hi @Jonathan Kew, I would say that this still a symptom of a bug in Firefox. The font served by Google should always override a font of the same name installed locally. Whether Scheharazade is installed locally makes a difference to whether the font file served by Google is used or not, and that is a bug. It should not make a difference.
|
|
Reporter | |
Updated•4 years ago
|
|
|
||
Comment 6•4 years ago
|
||
(In reply to David D Lowe from comment #5)
Hi @Jonathan Kew, I would say that this still a symptom of a bug in Firefox. The font served by Google should always override a font of the same name installed locally. Whether Scheharazade is installed locally makes a difference to whether the font file served by Google is used or not, and that is a bug. It should not make a difference.
No, that's not a bug; it's how the Google Fonts CSS is set up (for efficiency, so that if you have the font locally you don't need to download the resource at all). Your link to https://fonts.googleapis.com returns a chunk of CSS that looks like this:
@font-face {
font-family: "Scheherazade";
src: local("Scheherazade"), local("Scheherazade-Regular"), url("https://fonts.gstatic.com/s/scheherazade/v17/YA9Ur0yF4ETZN60keViq1kQQsJmppPXZ9Q.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
The CSS spec for @font-face explicitly says that the src: descriptor is "a prioritized ... list of external references or locally-installed font face names ... the user agent iterates over the set of references listed, using the first one it can successfully activate".
So by putting local(...) names before the downloadable url(...) resource, they are specifying that the locally-installed font is to be used if present, and only if it is not found will the browser move on to download the font from Google.
To use the remote font in all cases, you'd need a @font-face rule that omits those local(...) source names.
|
|
Reporter | |
Comment 7•4 years ago
|
||
OK. Thank you Jonathan. Brilliant work and well explained, I'm thankful :)
|
|
Reporter | |
Comment 8•4 years ago
|
||
I filed a bug report to Ubuntu's bug tracker, specifically the fonts-sil-scheherazade package. See: https://bugs.launchpad.net/ubuntu/+source/fonts-sil-scheherazade/+bug/1864500
|
|
||
Updated•4 years ago
|
Description
•