Words become unnecessarily italic on Firefox

[jdh8]

Exact URL of where the bug happened

• https://lichess.org/
• https://lishogi.org/

Steps to reproduce the bug

Just go to the home page. This issue is seen on various pages.

What did you expect to happen?

Chromium 131 on the same machine:

What happened instead?

Operating system

Linux (Fedora 41)

Browser and version (or alternate access method)

Firfefox 134

Additional information

No response

[SergioGlorias]

note: lishosi does not belong to lichess

[allanjoseph98]

Able to reproduce on Fedora 41. Firefox is correctly using the locally installed font instead of downloading it as per website instructions. The problem is that "Noto Sans" seems to be resolving to "Noto Sans Italic" rather than "Noto Sans Regular".

[dagandrew]

It happens with other websites too, I think it's Firefox problem

[ornicar]

I cannot reproduce it on Firefox 134 / Linux (NixOS)

[SergioGlorias]

seems to be specific to some firefox modified linux distributions

[C-Higgins]

I am reproducing on flatpak Firefox 134 on Fedora Kinoite. The font "Noto Sans" with style normal is resolving to the italic family; if you set the style to italic, it italicizes the italics further.
Using troubleshooting mode fixes the issue; however, disabling all extensions and themes does not fix the issue. This makes me think it's a Firefox bug. I couldn't find a relevant issue in their tracker.

The odd thing is that this doesn't happen on all sites using Noto Sans. I am only seeing it on Lichess and Lishogi. So perhaps it's an issue in combination with other CSS, or an issue with the font file. Another finding is that it shows "Font preview could not be generated" in the network tab for the font https://lichess1.org/assets/font/noto-sans-v14-latin-regular.woff2 while the other fonts work.

[SergioGlorias]

Testing Firefox from the official Mozilla repository (Debian) on a Chrome OS, I don't find any problems

I also tested it on an Umbrel OS that I have at home.

It appears to be a Fedora specific issue.

[ddobbelaere]

I am also able to reproduce this on Fedora 41 (Firefox 134.0), glad it wasn't a design decision :)

See also https://discussion.fedoraproject.org/t/font-on-websites/142269

EDIT: the issue is still present on current Firefox Beta (135.0b4) and Nightly (136.0a1).

[SergioGlorias]

https://github.com/lichess-org/lila/tree/master/public/font
I wonder how a font that hasn't been touched for 4 years now has this problem

[ddobbelaere]

The issue does not occur on the previous version of the Fedora 41 firefox package, namely 131.0.2. I tested this by a simple sudo dnf downgrade firefox. A subsequent sudo dnf update updates again to 134.0 and of course reproduces.

I note that the "Font preview could not be generated" thing also appears on 131.0.2 though (which has no "italic" issue). So maybe this is a dead end? Does it really render on another OS?

[ddobbelaere]

So we have the style html {font-family: "Noto Sans",Sans-Serif;}

I think that on 131.0.2 it just falls back to the generic Sans-Serif, as it makes no difference if I remove "Noto Sans".
On 134.0 though, it does make a difference: it's no longer italic if "Noto Sans" is removed.

Maybe both 131.0.2 and 134.0 reject the shipped woff2 font file (as indicated by the missing preview), and 134.0 is the one that finds the Fedora 41 "Noto Sans" system font (that somehow goes wrong?)? That seems to explain the dependence on OS environment.

EDIT: both 131.0.2 and 134.0 reject the shipped woff2 font file and fall back to the system font, which is rendered italic for 134.0, as seen below. Would be interesting to compare this with Firefox running on another OS.

[jdh8]

Thank you for confirming this issue. I am reporting this issue to Firefox at webcompat/web-bugs#146894.

[C-Higgins]

Now being tracked here https://bugzilla.mozilla.org/show_bug.cgi?id=1941820

[SergioGlorias]

There has been an update to the fonts, if you can check

[ddobbelaere]

I can confirm that the issue is now solved by #16806.
No more fallback to "shitty installed fonts" (according to #16806 (comment) 🤣).

[jdh8]

Confirmed fix! GG WP

[C-Higgins]

Not a big fan of this fix, being as it ships nearly 100kb of fonts regardless of local fonts. That's fairly heavy for the rarity of the problem; all the JS on the home page is only 125kb total. This does fix the issue for me though.

[allanjoseph98]

In terms of downloads, this changes nothing. The fonts were being downloaded regardless of local availability before this change. It's just rendering that preferred the local font. Don't ask me how.

[C-Higgins]

In terms of downloads, this changes nothing. The fonts were being downloaded regardless of local availability before this change. It's just rendering that preferred the local font. Don't ask me how.

I don't think that's accurate. The code was previously this

lila/ui/common/css/base/_fonts.scss

Lines 90 to 98 in ddc9643

	@font-face {
	font-family: 'Noto Sans';
	src:
	local('Noto Sans'),
	local('NotoSans'),
	local-font('noto-sans-v14-latin-regular.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
	U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

This would only fetch the webfont if the local font did not resolve.

[allanjoseph98]

I know. That's why I said don't ask me how. It was the case when I was investigating via firefox dev tools. The local font specified was only used for rendering on fedora. The download went through just the same.