1804937 - font-weight: 500; doesn't seem to work for RTL language

Status: RESOLVED INVALID

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

Description

[Steve]

Steps to reproduce:

I used font-weight: 500; for the h1 tag of this site: https://openinghours.co.il/

Actual results:

Nothing changed.

Expected results:

When testing on Chrome, I am getting different results when using font-weight: 400, font-weight: 500 and font-weight: 700, but on Mozilla, when trying to use font-weight: 500 I get the same result as for font-weight: 400

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 correct in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

I guess you're looking at this on Windows? (On macOS, I see the same results in both Firefox and Chrome.)

It looks to me like Chrome's handling of font-weight with the Segoe UI font is a bit broken. Try setting font-weight: 800 or 900 and see what happens! So I'm not sure that's a reliable example to compare with.

Checking the seguisb.ttf file, I confirmed that its OS/2 table usWeightClass value is actually 600. So there's no weight=500 face available in Segoe UI; the Normal face is 400, and Semibold is 600. So the question is which face should be used for a requested weight of 500.

What Firefox is doing here conforms to the CSS Fonts spec, which tells us that:

If there is no face which contains the desired value, a weight value is chosen using the rules below:

• If the desired weight is inclusively between 400 and 500, weights greater than or equal to the target weight are checked in ascending order until 500 is hit and checked, followed by weights less than the target weight in descending order, followed by weights greater than 500, until a match is found.
• If the desired weight is less than 400, weights less than or equal to the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
• If the desired weight is greater than 500, weights greater than or equal to the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.

So I believe it's the Chrome result that is wrong.

Anyhow, to get the Semibold weight of Segoe UI here in both Firefox and Chrome, try font-weight: 600.

Comment 3

[Steve]

Thank you for the explanation and also thanks for the tip for using font-weight: 600, I'll use this.

Comment 4

[Jonathan Kew [:jfkthame]]

For the record, the incorrect Chrome behavior is https://bugs.chromium.org/p/chromium/issues/detail?id=1022782.