1725450 - Firefox Nightly stopped recognizing the `system-ui` font

Status: RESOLVED DUPLICATE of bug 1728086

(Core :: Layout: Text and Fonts, defect)

Description

[microtribute]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:93.0) Gecko/20100101 Firefox/93.0

Steps to reproduce:

Go to any of the following URLS that utilize the system-ui font:
https://www.quora.com
https://docs.darklang.com/introduction/

Actual results:

Firefox Nightly does not recognize the system-ui font, resulting in displaying the sites in a substitute font. I remember this used to work prior to upgrading to Firefox Nightly 93. Again, this used to work correct previously.

Please check the screenshot.
https://nimb.ws/KbHwMi

Expected results:

Firefox should display the site in system-ui font.

Please check the correct display on Google Chrome:
https://nimb.ws/dntzgS

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Robert Longson [:longsonr]]

Is your nightly post bug 1724907 or not?

Comment 3

[microtribute]

@longsonr I am certain I am using the latest Nightly update. Please check the screenshot: https://nimb.ws/ViYETf

Comment 4

[Emilio Cobos Álvarez (:emilio)]

This seems to work for me here. What does the inspector's font panel say you're using in Quora?

Also, given this used to work before, perhaps you can pip install --user mozregression, then mozregression --good <one-date-where-it-used-to-work> to find out what broke it for you?

Comment 5

[microtribute]

@emilio Thank you for sending me the info. That's a great way to test a variety of Firefoxes. I went ahead and downloaded a nightly build for Aug 1st. And it did work for me. Please check the screenshots here.

https://nimbusweb.me/s/share/5934171/slbhhnwpoykcqxshx8iq

Thanks for looking into the issue!

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Hmm, so that nightly is from before bug 1226042 landed, so it was probably just passing "system-ui" down to fontconfig... What fonts does it use in the inspector's font panel before and after?

Comment 7

[microtribute]

@emilio I do use a custom font for the system UI which is not the default Ubuntu font. I updated it via GNOME Tweaks as in the following screenshot. https://nimb.ws/U9j03g

Comment 8

[microtribute]

I think it's DejaVu Sans that's substituted. https://nimb.ws/2o3liG

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Instead of that, can you click the arrow to the right of "Computed | Changes" in devtools, and click "Fonts", like this the image I'm about to attach? That should show the actual underlying font in use.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Fonts panel menu

Comment 11

[microtribute]

Here you go. It's DejaVu Sans ;)

https://imgur.com/a/jAQzliC

Comment 12

[Emilio Cobos Álvarez (:emilio)]

So if you open this page in the url bar, what does the font panel say?

data:text/html,<div style="font:menu">System font</div>

Comment 13

[microtribute]

Attachment: That's Adobe Clean.

That's Adobe Clean

Comment 14

[microtribute]

Attachment: system-ui font test

However when I change the font to system-ui:

data:text/html,<div style="font:system-ui">System font</div>

The system-ui just defaults back to the font that you chose from the Font Settings section in Firefox Preferences, which is a different behavior that what's happening on the darklang site.

Comment 15

[Jonathan Kew [:jfkthame]]

Note that font:system-ui isn't valid as a test; the system-ui keyword is a generic font-family name, so you'd need to do

font-family: system-ui

or add a size, e.g.

font: 15px system-ui

to make the style property valid.

(The menu keyword is different; it is a legacy CSS "system font" keyword that represents both a font face and a size, so font: menu in comment 12 was correct.)

Comment 16

[Emilio Cobos Álvarez (:emilio)]

(In reply to microtribute from comment #13)

Created attachment 9237289 [details]
That's Adobe Clean.

That's Adobe Clean

So that's really really odd. system-ui should be using the same family as menu as per this code.

I wonder what might be going on there. Do you have any prefs set that could influence this? Does it use DejaVu Sans on a new profile? If so I can try to prepare a build with some logging that could shed some light on this...

Comment 17

[microtribute]

Attachment: Screenshot from 2021-08-20 21-02-56.png

Adding a font size does show the same font used on the Darklang site which is DejaVu Sans.

Comment 18

[microtribute]

Attachment: Screenshot from 2021-08-20 21-09-28.png

I tried with a new profile and got the same font.

Comment 19

[microtribute]

Attachment: Screenshot from 2021-09-01 14-07-59.png

@emilio It seems like the bug has been fixed in the latest build.

Comment 20

[microtribute]

Also check this out. The correct font is rendered.
https://nimb.ws/aVbQJo