1788721 - Firefox on Android selects Roboto as serif font even for weight:100, while Chrome avoids it and selects Noto Sans

Status: NEW

(Core :: Graphics: Text, defect)

Description

[Thomas Wisniewski [:twisniewski][PTO until Mar.16]]

As diagnosed at webcompat.com, the page in question tells Firefox on Android to render paragraph text with this CSS:

font-family: serif;
font-weight: 100;

Firefox selects Roboto, which appears much thinner than what Chrome presents, and is an inferior choice for readability. In fact, Chrome will select Noto Sans instead even if Roboto is added to the font-family style:

font-family:Roboto,serif;
font-weight:100;

It might be worth it for Firefox to follow suit and avoid Roboto for thin font-weights, for webcompat's sake as well as text legibility.

Comment 1

[Thomas Wisniewski [:twisniewski][PTO until Mar.16]]

This is also affecting ThePointsGuy.com. Chrome is picking Noto despite the site requesting Roboto:

font-family: Roboto,sans-serif;
font-weight: 400;

Comment 2

[Makoto Kato [:m_kato]]

Interesting. But comment #0 is incorrect. The following font-family setting doesn't apply serif on GeckoView. Our font config has "Noto Serif" entry.

.com-paragraph {
 font-family:Georgia,"serif";
 font-weight:100;
 margin-bottom:2rem
}

When I change to the following in devtools, it works expected.

 font-family:Georgia,serif;

Comment 3

[Makoto Kato [:m_kato]]

Since quoted value, we expect that this is real font name, but system doesn't have real font name "serif"...

I guess that Chrome uses Skia, so it will use /etc/fonts.xml entry as alias.

    <family name="serif">
        <font weight="400" style="normal">NotoSerif-Regular.ttf</font>
        <font weight="700" style="normal">NotoSerif-Bold.ttf</font>
        <font weight="400" style="italic">NotoSerif-Italic.ttf</font>
        <font weight="700" style="italic">NotoSerif-BoldItalic.ttf</font>
    </family>

Comment 4

[Raul Bucata]

Verified this issue and still reproduces on Firefox Nightly. I see different fonts. See attached file.

Tested with:

Browser / Version: Firefox Nightly 128.0a1 (2016022983-🦎128.0a1-20240525201917🦎)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)
Operating System: Oppo Find X5 (Android 13) - 1080 x 2400 pixels, 20:9 ratio (~402 ppi density)

Comment 5

[Raul Bucata]

Attachment: Screenshot_19.png