Inconsistent Hebrew font across Firefox for Android components

RESOLVED FIXED in Firefox 53

Status

()

Firefox for Android
Theme and Visual Design
P2
normal
RESOLVED FIXED
a year ago
7 months ago

People

(Reporter: ItielMaN, Unassigned, NeedInfo)

Tracking

(Blocks: 1 bug)

unspecified
Firefox 53
Unspecified
Android
Points:
---

Firefox Tracking Flags

(firefox53 fixed)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(18 attachments)

277.39 KB, image/png
Details
104.54 KB, image/png
Details
44.75 KB, image/png
Details
65.32 KB, image/png
Details
378.23 KB, image/png
Details
91.81 KB, image/png
Details
590.20 KB, image/png
Details
572.92 KB, image/png
Details
1.01 KB, text/html
Details
90.59 KB, image/jpeg
Details
91.89 KB, image/jpeg
Details
1.16 KB, text/html
Details
1.25 KB, text/html
Details
58 bytes, text/x-review-board-request
jfkthame
: review+
Details | Review
125.20 KB, image/png
Details
121.30 KB, image/png
Details
330.31 KB, image/png
Details
370.83 KB, image/png
Details
(Reporter)

Description

a year ago
In the Hebrew build (and possibly in other RTL languages too), they is an inconsistency with the font type in different components across the app.
The apparent fonts are Times New Roman and Arial.

Exmaples of strings where Firefox is using the Arial font (good):
1. "Search or enter address" in the URL bar
2. "Top Sites", "Bookmarks" and "History" in the New Tab page
3. All items in the Menu

Exmaples of strings where Firefox is using the Times New Roman font (bad):
1. All text in the Private Tab welcome page
2. "No Downloads" in about:downloads page
3. All text in "about:" page
4. "Remove All Reports" in about:crashes page. Note that all the other text there is Arial.

And many more.
The formal font that should appear is Arial. Times New Roman is looking bad in Firefox.

I'll attach screenshots if needed.
The 'good' examples seem all to be native Android UI, while the 'bad' examples are rendered web content. Maybe it's enough to update the pref for the default web font for this configuration.
(Reporter)

Updated

a year ago
Priority: -- → P2
(Reporter)

Comment 2

11 months ago
Created attachment 8793862 [details]
Bad font - about page
(Reporter)

Comment 3

11 months ago
Created attachment 8793863 [details]
Bad font - Private Tab page
(Reporter)

Comment 4

11 months ago
Created attachment 8793864 [details]
Bad font- "No downloads" string in about:downloads page
(Reporter)

Comment 5

11 months ago
Created attachment 8793866 [details]
Bad font- "Remove All Reports" string in about:crashes page
(Reporter)

Comment 6

11 months ago
Created attachment 8793867 [details]
Good font - menu
(Reporter)

Comment 7

11 months ago
Created attachment 8793868 [details]
Good font - Settings page
(Reporter)

Comment 8

11 months ago
Created attachment 8793869 [details]
Good font- New Tab page
(Reporter)

Comment 9

11 months ago
Attached a few screenshots to demonstrate the issue ('good' and 'bad' examples).

Comment 10

11 months ago
(In reply to Sebastian Kaspari (:sebastian) from comment #1)
> The 'good' examples seem all to be native Android UI, while the 'bad'
> examples are rendered web content. Maybe it's enough to update the pref for
> the default web font for this configuration.

The 'bad' font from the screenshots above (Thanks ItaielMan!) is indeed an serif font, appears on the browser content. We can workaround it easily on intl.css, although please keep in mind that currently there is no RTL builds on the release channel, and there is some UI glitches on the 'good' screenshots above as well.

Comment 11

10 months ago
I see a strange font in Hebrew web content on pages that have not specified a font. Can this be changed by the user? For  some reason I cannot upload the screenshot, but see https://goo.gl/photos/wUwioeZZmgWspqKS8

Comment 12

10 months ago
(In reply to Nitsan from comment #11)
> I see a strange font in Hebrew web content on pages that have not specified
> a font. Can this be changed by the user? For  some reason I cannot upload
> the screenshot, but see https://goo.gl/photos/wUwioeZZmgWspqKS8

Isn't this font is one of the fonts provided by Samsung or another OEM? Is this font used somewhere else on the system (such as the lock screen etc.)? In opposite to desktop operating systems, Android allow specifying only one font which will be used across the system.
(Reporter)

Updated

10 months ago
Version: 48 Branch → unspecified

Comment 13

10 months ago
I never see this font in any other app. The device has only the four fonts that came with he standard Android installation, an the default font (Samsung) is selected in the display settings.

Comment 14

9 months ago
Created attachment 8813840 [details]
weird font in firefox for android

A weird front appearing as default in ff48 on Galaxy Tab S running Android 6.0.1. This font is not observed in any other app on this machine.
(Reporter)

Comment 15

9 months ago
Still an issue in latest Nightly builds.

Comment 16

9 months ago
Created attachment 8816817 [details]
Testcase

I am able to reproduce this issue on a Samsung S4 with stock ROM, but not with CyanogenMod. I guess it won't be reproducible for all devices from different vendors, or it might be even an issue with local OEM ROMs. 

From the testcase above, I can confirm that the issue is happening because of the font-weight. For low weights, the device switch to Times New Roman, which is a bad choice for Hebrew text. Other browsers show consistent font for all weights.

Comment 17

9 months ago
Created attachment 8816818 [details]
Screenshot of the testcase in action on affected device (Samsung Galaxy S4 with stock ROM)

Comment 18

9 months ago
Created attachment 8816822 [details]
Screenshot of the testcase in action on an unaffected device (Samsung Galaxy S4 with CyanogenMod)

Comment 19

9 months ago
Created attachment 8816825 [details]
Expected result (testcase with downloaded font)

I've applied another font to the text to be used instead of the device fonts, and this is enough to workaround this bug. Other browsers can enjoy this font as well; Please note the multiple weight levels available on this font[1]. 

Conclusions: 
* The affected devices probably comes with bad fonts. Other browsers are not affected by the weird behavior of switching fonts because of a missing weights, and Hebrew users will prefer Sans Serif fonts instead of Serif font. 
* I suspect that this problem caused by the recent switch to Open Sans, which doesn't provide Hebrew support unless explicitly requested. 

[1] I've used the Assistant font from https://fonts.google.com/specimen/Assistant

Comment 20

9 months ago
Created attachment 8816828 [details]
Expected result (test case with fixed Open Sans)

I understand that Firefox bundle the Clear Sans font[1], which doesn't contain Hebrew glyphs[2]. By adding the Hebrew Open Sans glyphs, I was able to workaround this issue. 

I guess the next step is to investigate the best usable fonts on the platform[3], now that we know which devices are affected and what causing these problems. Please assist us. 

[1] https://dxr.mozilla.org/mozilla-central/source/mobile/android/fonts
[2] https://www.fontsquirrel.com/fonts/clear-sans (scroll down to languages and click it)
[3] https://dxr.mozilla.org/mozilla-central/rev/6bdef7ba8b4108a996b9f61ef9f81c5ea6c93017/modules/libpref/init/all.js#4273-4277
Right; in all.js, it looks like we currently have

  font.default.he = sans-serif

and

  font.name.sans-serif.he = Clear Sans

which means Hebrew pages will get the same Clear Sans for Latin characters as non-Hebrew pages; but it doesn't actually include Hebrew glyphs, so for those, we'll fall back to something else.

We also have

  font.name-list.sans-serif.he = Droid Sans Hebrew, Clear Sans, Droid Sans

which should mean that for devices that include Droid Sans with Hebrew support, that's what we'll get; but if the device doesn't have the Droid Sans Hebrew glyphs either, we lose (i.e. fallback may land on something like Droid Serif, which people don't generally prefer for modern content).

So is there a Samsung-specific font that we should be using here? If so, adding that name to the Hebrew font prefs might be all that's needed.

Or is there an Android UI setting that we should be reading somehow to determine the default font to use, in preference to (or in addition to) Gecko-specific settings from all.js?

Comment 22

8 months ago
As a user of some Samsung devices I see that the Arial font seem to display Hebrew with nikud correctly. Maybe that is the way to go until Samsung fixes the default fonts.

Comment 23

8 months ago
(In reply to Nitsan from comment #22)
> As a user of some Samsung devices I see that the Arial font seem to display
> Hebrew with nikud correctly. Maybe that is the way to go until Samsung fixes
> the default fonts.

Which device do you have? I can confirm the existence of this issue on Galaxy S4 Stock ROM (Pelephone) but not on Cyanogenmod. The issue can be reproduced easily with the testcase - https://bug1298396.bmoattachments.org/attachment.cgi?id=8816817
I assume Cyanogenmod bundles a different set of fonts from the stock ROM.

If you go to about:config, find the font.name-list.sans-serif.he preference, and add "Arial" to the list of fonts there, does that help (on the stock device)?

Comment 25

8 months ago
Affected devices as we know it at the moment:
Samsung Galaxy S4 (Stock ROM; Pelephone)
Samsung Galaxy S5 (Stock ROM)
(Reporter)

Comment 26

8 months ago
(In reply to Jonathan Kew (:jfkthame) from comment #24)
> I assume Cyanogenmod bundles a different set of fonts from the stock ROM.
> 
> If you go to about:config, find the font.name-list.sans-serif.he preference,
> and add "Arial" to the list of fonts there, does that help (on the stock
> device)?

Surprisingly.. it does!
Using Samsung Galaxy S5 G900F Android 6.0.1, stock ROM.
(Reporter)

Comment 27

8 months ago
This actually fixed a yet-to-be-noticed bug in Reader Mode, where again the font is Times New Roman. Changing the preference fixes all mentioned examples in the screenshots.
(Reporter)

Comment 28

8 months ago
Nitsan, can you verify that changing this preference fixes the issue in your device as well?
Flags: needinfo?(n)

Comment 29

8 months ago
On Samsung Galaxy Tab S, stock Android 6.0.1: Changed all font.*.he settings to "Arial" but no change in the displayed Hebrew: normal text in incorrect font, while bold text is in Arial, supporting nikud correctly.

Comment 30

8 months ago
It may also be relevant to note that my device is purchased in Denmark, not in Israel. Can that make a difference as to the default installed fonts in the stock rom?
Comment hidden (mozreview-request)

Comment 32

8 months ago
mozreview-review
Comment on attachment 8820417 [details]
Bug 1298396 Inconsistent Hebrew font across Firefox for Android components

https://reviewboard.mozilla.org/r/99900/#review100380

::: modules/libpref/init/all.js:4281
(Diff revision 1)
>  
>  pref("font.name.serif.he", "Droid Serif");
>  pref("font.name.sans-serif.he", "Clear Sans");
>  pref("font.name.monospace.he", "Droid Sans Mono");
>  pref("font.name-list.serif.he", "Noto Serif");
> -pref("font.name-list.sans-serif.he", "Droid Sans Hebrew, Clear Sans, Droid Sans");
> +pref("font.name-list.sans-serif.he", "Droid Sans Hebrew, Clear Sans, Droid Sans, Arial");

I've placed `Arial` as the last font, so it will act as a failover font for sans-serif.

Comment 33

8 months ago
mozreview-review
Comment on attachment 8820417 [details]
Bug 1298396 Inconsistent Hebrew font across Firefox for Android components

https://reviewboard.mozilla.org/r/99900/#review100974

I think it's fine to do this, it should help in at least some cases. (FWIW, I suspect the device doesn't really have the Arial font, but is configured to alias the name "arial" to whatever its default sans-serif font is really called.)
Attachment #8820417 - Flags: review?(jfkthame) → review+

Comment 34

8 months ago
Can you say why it is that only Firefox invokes the use of the incorrect font, while Chrome and other apps use Arial that has proper Hebrew support? I use Hebrew Wikipedia as test page.

Comment 35

8 months ago
I can verify that the offeding font is open sans (https://fonts.google.com/specimen/Open+Sans?selection.family=Lato). Is there a method to blacklist it and force ff to use Arial as the default font?

Comment 36

7 months ago
@Nistan, can you please provide us the list of fonts you have at your /system/fonts folder?
Keywords: checkin-needed

Comment 37

7 months ago
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/8f0724be03a6
Inconsistent Hebrew font across Firefox for Android components r=jfkthame
Keywords: checkin-needed

Comment 38

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/8f0724be03a6
Status: NEW → RESOLVED
Last Resolved: 7 months ago
status-firefox53: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53

Comment 39

7 months ago
(In reply to Tomer Cohen :tomer from comment #36)
> @Nistan, can you please provide us the list of fonts you have at your
> /system/fonts folder?

ls /system/fonts
AndroidClock.ttf
AndroidClock_Highlight.ttf
AndroidClock_Solid.ttf
CarroisGothicSC-Regular.ttf
Chococooky.ttf
Clockopia.ttf
ComingSoon.ttf
Cooljazz.ttf
CutiveMono.ttf
DancingScript-Bold.ttf
DancingScript-Regular.ttf
DroidSans-Bold.ttf
DroidSans.ttf
DroidSansMono.ttf
LindseyforSamsung-Regular.ttf
NotoColorEmoji.ttf
NotoNaskhArabic-Bold.ttf
NotoNaskhArabic-Regular.ttf
NotoNaskhArabicUI-Bold.ttf
NotoNaskhArabicUI-Regular.ttf
NotoSansArmenian-Bold.ttf
NotoSansArmenian-Regular.ttf
NotoSansBalinese-Regular.ttf
NotoSansBamum-Regular.ttf
NotoSansBatak-Regular.ttf
NotoSansBengali-Bold.ttf
NotoSansBengali-Regular.ttf
NotoSansBengaliUI-Bold.ttf
NotoSansBengaliUI-Regular.ttf
NotoSansBuginese-Regular.ttf
NotoSansBuhid-Regular.ttf
NotoSansCanadianAboriginal-Regular.ttf
NotoSansCham-Bold.ttf
NotoSansCham-Regular.ttf
NotoSansCherokee-Regular.ttf
NotoSansCoptic-Regular.ttf
NotoSansDevanagari-Bold.ttf
NotoSansDevanagari-Regular.ttf
NotoSansDevanagariUI-Bold.ttf
NotoSansDevanagariUI-Regular.ttf
NotoSansEthiopic-Bold.ttf
NotoSansEthiopic-Regular.ttf
NotoSansGeorgian-Bold.ttf
NotoSansGeorgian-Regular.ttf
NotoSansGlagolitic-Regular.ttf
NotoSansGujarati-Bold.ttf
NotoSansGujarati-Regular.ttf
NotoSansGujaratiUI-Bold.ttf
NotoSansGujaratiUI-Regular.ttf
NotoSansGurmukhi-Bold.ttf
NotoSansGurmukhi-Regular.ttf
NotoSansGurmukhiUI-Bold.ttf
NotoSansGurmukhiUI-Regular.ttf
NotoSansHanunoo-Regular.ttf
NotoSansHebrew-Bold.ttf
NotoSansHebrew-Regular.ttf
NotoSansJP-Regular.otf
NotoSansJavanese-Regular.ttf
NotoSansKR-Regular.otf
NotoSansKannada-Bold.ttf
NotoSansKannada-Regular.ttf
NotoSansKannadaUI-Bold.ttf
NotoSansKannadaUI-Regular.ttf
NotoSansKayahLi-Regular.ttf
NotoSansKhmer-Bold.ttf
NotoSansKhmer-Regular.ttf
NotoSansKhmerUI-Bold.ttf
NotoSansKhmerUI-Regular.ttf
NotoSansLao-Bold.ttf
NotoSansLao-Regular.ttf
NotoSansLaoUI-Bold.ttf
NotoSansLaoUI-Regular.ttf
NotoSansLepcha-Regular.ttf
NotoSansLimbu-Regular.ttf
NotoSansLisu-Regular.ttf
NotoSansMalayalam-Bold.ttf
NotoSansMalayalam-Regular.ttf
NotoSansMalayalamUI-Bold.ttf
NotoSansMalayalamUI-Regular.ttf
NotoSansMandaic-Regular.ttf
NotoSansMeeteiMayek-Regular.ttf
NotoSansMongolian-Regular.ttf
NotoSansMyanmar-Bold.ttf
NotoSansMyanmar-Regular.ttf
NotoSansMyanmarUI-Bold.ttf
NotoSansMyanmarUI-Regular.ttf
NotoSansNKo-Regular.ttf
NotoSansNewTaiLue-Regular.ttf
NotoSansOlChiki-Regular.ttf
NotoSansOriya-Bold.ttf
NotoSansOriya-Regular.ttf
NotoSansOriyaUI-Bold.ttf
NotoSansOriyaUI-Regular.ttf
NotoSansRejang-Regular.ttf
NotoSansSC-Regular.otf
NotoSansSaurashtra-Regular.ttf
NotoSansSinhala-Bold.ttf
NotoSansSinhala-Regular.ttf
NotoSansSundanese-Regular.ttf
NotoSansSylotiNagri-Regular.ttf
NotoSansSymbols-Regular-Subsetted.ttf
NotoSansSyriacEstrangela-Regular.ttf
NotoSansTC-Regular.otf
NotoSansTagbanwa-Regular.ttf
NotoSansTaiLe-Regular.ttf
NotoSansTaiTham-Regular.ttf
NotoSansTaiViet-Regular.ttf
NotoSansTamil-Bold.ttf
NotoSansTamil-Regular.ttf
NotoSansTamilUI-Bold.ttf
NotoSansTamilUI-Regular.ttf
NotoSansTelugu-Bold.ttf
NotoSansTelugu-Regular.ttf
NotoSansTeluguUI-Bold.ttf
NotoSansTeluguUI-Regular.ttf
NotoSansThaana-Bold.ttf
NotoSansThaana-Regular.ttf
NotoSansThai-Bold.ttf
NotoSansThai-Regular.ttf
NotoSansThaiUI-Bold.ttf
NotoSansThaiUI-Regular.ttf
NotoSansTibetan-Regular.ttf
NotoSansTifinagh-Regular.ttf
NotoSansVai-Regular.ttf
NotoSansYi-Regular.ttf
NotoSerif-Bold.ttf
NotoSerif-BoldItalic.ttf
NotoSerif-Italic.ttf
NotoSerif-Regular.ttf
Roboto-Black.ttf
Roboto-BlackItalic.ttf
Roboto-Bold.ttf
Roboto-BoldItalic.ttf
Roboto-Italic.ttf
Roboto-Light.ttf
Roboto-LightItalic.ttf
Roboto-Medium.ttf
Roboto-MediumItalic.ttf
Roboto-Regular.ttf
Roboto-Thin.ttf
Roboto-ThinItalic.ttf
RobotoCondensed-Bold.ttf
RobotoCondensed-BoldItalic.ttf
RobotoCondensed-Italic.ttf
RobotoCondensed-Light.ttf
RobotoCondensed-LightItalic.ttf
RobotoCondensed-Regular.ttf
Rosemary.ttf
SECCutiveMono.ttf
SECFallback.ttf
SECHans-Regular.otf
SECRobotoLight-Bold.ttf
SECRobotoLight-Regular.ttf
SamsungColorEmoji.ttf
SamsungKorean-Bold.ttf
SamsungKorean-Regular.ttf
SamsungNeoNum-3L.ttf
SamsungNeoNum-3R.ttf
SamsungNeoNum-3T.ttf
SamsungNeoNumCond-3T.ttf
SamsungSans-Num35.ttf
SamsungSans-Num3L.ttf
SamsungSans-Num3Lv.ttf
SamsungSans-Num3R.ttf
SamsungSans-Num3T.ttf
SamsungSans-Num45.ttf
SamsungSans-Num4L.ttf
SamsungSans-Num4Lv.ttf
SamsungSans-Num4T.ttf
SamsungSans-Num4Tv.ttf
Flags: needinfo?(n)
(Reporter)

Comment 40

7 months ago
Nistan, can you please uninstall and the re-install Nightly on Android and check if this issue is fixed? Thanks!
Flags: needinfo?(n)

Comment 41

7 months ago
(In reply to ItielMaN from comment #40)
> Nistan, can you please uninstall and the re-install Nightly on Android and
> check if this issue is fixed? Thanks!

Not sure, I am not an Android developer, so have to figure this out first. But I can give it a shot. Is it straightforward?
(Reporter)

Comment 42

7 months ago
(In reply to Nitsan from comment #41)
> Not sure, I am not an Android developer, so have to figure this out first.
> But I can give it a shot. Is it straightforward?

No need be a developer for this :)
If Nightly is already installed on your device, uninstall it from the device's settings, and re-install it from here:
https://ftp.mozilla.org/pub/mobile/nightly/latest-mozilla-central-android-api-15-l10n/fennec-53.0a1.he.android-arm.apk

Comment 43

7 months ago
(In reply to ItielMaN from comment #42)
> (In reply to Nitsan from comment #41)
> > Not sure, I am not an Android developer, so have to figure this out first.
> > But I can give it a shot. Is it straightforward?
> 
> No need be a developer for this :)
> If Nightly is already installed on your device, uninstall it from the
> device's settings, and re-install it from here:
> https://ftp.mozilla.org/pub/mobile/nightly/latest-mozilla-central-android-
> api-15-l10n/fennec-53.0a1.he.android-arm.apk

I installed the nightly build, and the result is ambiguous: the Hebrew font resembles the font used by the official FF release, but nikkud is supported correctly in the nightly. The relative font sizes are not the same, e.g. the font used in quotes is larger than the font of the main text, rather than being smaller.
(Reporter)

Comment 44

7 months ago
(In reply to Nitsan from comment #43)
> I installed the nightly build, and the result is ambiguous: the Hebrew font
> resembles the font used by the official FF release, but nikkud is supported
> correctly in the nightly. The relative font sizes are not the same, e.g. the
> font used in quotes is larger than the font of the main text, rather than
> being smaller.

Can you please attach 2 screenshots, one from Nightly and one from the official channel, taken from the testcase (named "Testcase") attached in this bug?
Also, attach a screenshot for the second issue you've mentioned.

Comment 45

7 months ago
(In reply to Nitsan from comment #14)
> Created attachment 8813840 [details]
> weird font in firefox for android
> 
> A weird front appearing as default in ff48 on Galaxy Tab S running Android
> 6.0.1. This font is not observed in any other app on this machine.

Have you ever changed the default system font in Android Settings → Display → Font Style?

Comment 46

7 months ago
(In reply to Tomer Cohen :tomer from comment #45)
> (In reply to Nitsan from comment #14)
> > Created attachment 8813840 [details]
> > weird font in firefox for android
> > 
> > A weird front appearing as default in ff48 on Galaxy Tab S running Android
> > 6.0.1. This font is not observed in any other app on this machine.
> 
> Have you ever changed the default system font in Android Settings → Display
> → Font Style?

Yes, did not help.

Comment 47

7 months ago
Created attachment 8826284 [details]
testcase in nightly build

Comment 48

7 months ago
Created attachment 8826287 [details]
testcase in official release

Comment 49

7 months ago
Created attachment 8826289 [details]
Nikkud in official release

Comment 50

7 months ago
Created attachment 8826290 [details]
Nikkud in nightly build
(Reporter)

Comment 51

7 months ago
(In reply to Nitsan from comment #46)
> Yes, did not help.

If you change the font to the default one, the issue still exists?

Comment 52

7 months ago
(In reply to ItielMaN from comment #51)
> (In reply to Nitsan from comment #46)
> > Yes, did not help.
> 
> If you change the font to the default one, the issue still exists?

Yes (it is Samsung Sans)
You need to log in before you can comment on or make changes to this bug.