1848345 - Different font-weight on websites compared to Chrome

Status: NEW

(Web Compatibility :: Knowledge Base, defect, P3)

Description

[Calin Tanase]

This is a meta bug to track the differences in font-weight (bolder/thinner) present on different webpages.

• Issue found during WebCompat team [Top100] websites testing

Comment 1

[Calin Tanase]

Attachment: ebay.com.png

On ebay.com the "Shipping to:" text appears bolder on Firefox compared to Chrome.

Comment 2

[Jonathan Kew [:jfkthame]]

This is not really a valid comparison as far as font weight/darkness is concerned, because Firefox and Chrome are using entirely different font-families there. It looks like Firefox is using a webfont from eBay ("Market Sans", I think), while Chrome is falling back to Arial.

So the possibly-interesting compat question here is why Chrome isn't using the site's webfont.

Comment 3

[Calin Tanase]

Attachment: github.png

Reproducible on github.com as well.

Comment 4

[Jonathan Kew [:jfkthame]]

This is different from the screenshot in comment 1, where there were clearly different fonts being used. In the github case, it looks more like a rendering difference that might related to the use of -webkit-font-smoothing and/or -moz-osx-font-smoothing with the light-on-dark text. But I'm not able to check in detail right now as the page I get when I view github.com is quite different, and doesn't have those Create Repository buttons.... I'm not sure how to view that.

Comment 5

[Raul Bucata]

Reproducible on fandom.com - mobile

Comment 6

[Calin Tanase]

Attachment: paypal FF vs Chrome.png

Reproducible on paypal.com (header and footer) as well. The font might be different but I'm not sure.

Tested on Windows 10 / Firefox Nightly 120.0a1 (2023-09-28).

Comment 7

[Jonathan Kew [:jfkthame]]

(In reply to Calin Tanase from comment #6)

Created attachment 9355824 [details]
paypal FF vs Chrome.png

Reproducible on paypal.com (header and footer) as well. The font might be different but I'm not sure.

Tested on Windows 10 / Firefox Nightly 120.0a1 (2023-09-28).

In this screenshot, it looks like Firefox is applying synthetic-bold to text of the footer links. But I don't see that when loading paypal.com locally. What font does the DevTools Inspector (check the Fonts panel for the actual font, not the font-family list) report is being used here, and what font-weight is applied?

Comment 8

[Calin Tanase]

Attachment: paypal font used.png

There you go:

Comment 9

[Jonathan Kew [:jfkthame]]

Attachment: Paypal used font - UK

Curious.... I get a different result there, with it using a Bold version of the font. I guess the paypal styling may vary between countries, and the site you're getting doesn't have a Bold webfont configured.

Comment 10

[Jonathan Kew [:jfkthame]]

Ah, yes - if I explicitly go to https://www.paypal.com/ro/home, I see the same styling as you, with synthetic-bold being applied to the webfont there.

The fact that our synthetic bold looks somewhat different from Chrome's is known/expected. (It also depends on the platform.)

Comment 14

[Dennis Schubert [:denschub]]

The ni? was for me to backfill the URLs, but we don't do that anymore, so cancelling it.