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]]

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]]

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>