1298396 - Inconsistent Hebrew font across Firefox for Android components

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Theme and Visual Design, defect, P2)

Description

[Itiel]

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.

Comment 1

[Sebastian Kaspari (:sebastian; :pocmo)]

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.

Comment 2

[Itiel]

Attachment: Bad font - about page

Comment 3

[Itiel]

Attachment: Bad font - Private Tab page

Comment 4

[Itiel]

Attachment: Bad font- "No downloads" string in about:downloads page

Comment 5

[Itiel]

Attachment: Bad font- "Remove All Reports" string in about:crashes page

Comment 6

[Itiel]

Attachment: Good font - menu

Comment 7

[Itiel]

Attachment: Good font - Settings page

Comment 8

[Itiel]

Attachment: Good font- New Tab page

Comment 9

[Itiel]

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

Comment 10

[Tomer Cohen :tomer]

(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

[Nitsan]

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

[Tomer Cohen :tomer]

(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.

Comment 13

[Nitsan]

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

[Nitsan]

Attachment: 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.

Comment 15

[Itiel]

Still an issue in latest Nightly builds.

Comment 16

[Tomer Cohen :tomer]

Attachment: 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

[Tomer Cohen :tomer]

Attachment: Screenshot of the testcase in action on affected device (Samsung Galaxy S4 with stock ROM)

Comment 18

[Tomer Cohen :tomer]

Attachment: Screenshot of the testcase in action on an unaffected device (Samsung Galaxy S4 with CyanogenMod)

Comment 19

[Tomer Cohen :tomer]

Attachment: 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

[Tomer Cohen :tomer]

Attachment: 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

Comment 21

[Jonathan Kew [:jfkthame]]

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

[Nitsan]

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

[Tomer Cohen :tomer]

(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

Comment 24

[Jonathan Kew [:jfkthame]]

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

[Tomer Cohen :tomer]

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

Comment 26

[Itiel]

(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.

Comment 27

[Itiel]

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.

Comment 28

[Itiel]

Nitsan, can you verify that changing this preference fixes the issue in your device as well?

Comment 29

[Nitsan]

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

[Nitsan]

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 31

[Tomer Cohen :tomer]

Attachment: Bug 1298396 Inconsistent Hebrew font across Firefox for Android components

Review commit: https://reviewboard.mozilla.org/r/99900/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/99900/

Comment 32

[Tomer Cohen :tomer]

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

[Jonathan Kew [:jfkthame]]

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.)

Comment 34

[Nitsan]

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

[Nitsan]

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

[Tomer Cohen :tomer]

@Nistan, can you please provide us the list of fonts you have at your /system/fonts folder?

Comment 37

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8f0724be03a6
Inconsistent Hebrew font across Firefox for Android components r=jfkthame

Comment 38

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/8f0724be03a6

Comment 39

[Nitsan]

(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

Comment 40

[Itiel]

Nistan, can you please uninstall and the re-install Nightly on Android and check if this issue is fixed? Thanks!

Comment 41

[Nitsan]

(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?

Comment 42

[Itiel]

(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

[Nitsan]

(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.

Comment 44

[Itiel]

(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

[Tomer Cohen :tomer]

(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

[Nitsan]

(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

[Nitsan]

Attachment: testcase in nightly build

Comment 48

[Nitsan]

Attachment: testcase in official release

Comment 49

[Nitsan]

Attachment: Nikkud in official release

Comment 50

[Nitsan]

Attachment: Nikkud in nightly build

Comment 51

[Itiel]

(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

[Nitsan]

(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)