Font weight problem: 300 is lighter than the 100

[Erimus-Koo]

Description

Source Han Sans HC, ver 2.004r Chrome Version 118.0.5993.88 (Official Build) (arm64)

While I set the font in Chrome:

• font-weight:100 used the "Light"
• font-weight:300 used the "Extra Light"

The 300 is lighter than the 100

[punchcutter]

Source Han doesn't follow those weight increments. ExtraLight is 250 and Light is 300 so I suspect the CSS fallback algorithm in Chrome is finding the unexpected weights like that. The Google versions of the variable fonts for Noto CJK reset all these values to 100-900 so that CSS works the way you are expecting it. They only seem to have done the subset, though: https://github.com/notofonts/noto-cjk/blob/main/google-fonts/NotoSansHK%5Bwght%5D.ttf

[Erimus-Koo]

Variable fonts should display correctly, but using subsets with multiple languages won't be so perfect.

In Source Han Sans, if the "Extra Light" is 250 and "Light" is 300, then a weight of 300 should be displayed as light. And when a weight is 100, it should first try to find a font weight lighter than or equal to 100. If no such font weight exists, it should default to the lightest available option, which in this case would be the Extra Light (250). However, the current result does not match these expectations.

The font weight's fall back is here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

So I am still confused about this.

---

And I print the font info with python, and find more:

Font Name: Source Han Sans HC ExtraLight
Font Weight: 250

Font Name: Source Han Sans HC Light
Font Weight: 300

Font Name: Source Han Sans HC Normal
Font Weight: 350

Font Name: Source Han Sans HC Medium
Font Weight: 500

Font Name: Source Han Sans HC Heavy
Font Weight: 900

Font Name: Source Han Sans HC
Font Weight: 400

Font Name: Source Han Sans HC
Font Weight: 700

• There is a 350 Normal will not display in normal CSS settings. (400->Regular, 300->Light)
• The 700 lost bold in font name.

The Python Code

```python from fontTools.ttLib import TTCollection def print_ttc_font_info(ttc_file): collection = TTCollection(ttc_file) for i, font in enumerate(collection.fonts): font_name = font["name"].getName(1, 3, 1, 1033).toUnicode() font_weight = font["OS/2"].usWeightClass # print(f"Font {i+1}:") if 'Source Han Sans HC' in font_name: print(f"Font Name: {font_name}") print(f"Font Weight: {font_weight}") print() ttc_file = "/Users/erimus/Library/Fonts/SourceHanSans.ttc" print_ttc_font_info(ttc_file)```

[tamcy]

Looks fine in my configuration (Chrome 118.0.5993.89, Source Han Sans 2.004 local font, Windows 11):

https://codepen.io/tamcy/pen/abXbxxd

A lot of factors can affect the rendering result in a browser, so it might be better to create a minimal demo page to better isolate the problem, i.e. whether it is a font related issue. I also noticed from the screenshot that the number font, which obviously isn't Source Han Sans, also exhibit the same abnormalities: W100 & W200 are heavier than W300, and W400 is lighter than W300.

[Erimus-Koo]

@tamcy That seems strange and incorrect in both my Chrome and Firefox. I believe the issue may be related to the font installed on my system.

Could you please check your font version in the font book, I've just download it again recently.

[Erimus-Koo]

I've tried to inactive the "Source Han Sans HC" which is in the previous version and the browser fallback to "Songti SC", then I active the font again, and the Source Han works, so I can confirm that the previous version font file is the FONT that the browser was using.

[Erimus-Koo]

@tamcy an other strange point is in my Safari, all the fonts fallback to some kind of Serif

[tamcy]

Here's my font data. As said I am testing on Windows 11. Tried .otf and .ttc (Super OTC), using Chrome or Firefox.

I didn't test on a Mac, but AFAIK Safari prohibits using local fonts due to security concern. Ref: https://apple.stackexchange.com/questions/394649/safari-doesnt-detect-font-installed-on-system

[Erimus-Koo]

@tamcy Sorry for that I've seen your font's version after commenting, and it's perfect on my Windows too, with the same TTC file.

Actually, I'm not sure, the fonts on my Win were downloaded months ago, and the font on my Mac was downloaded recently, they have the same version but I can't be sure the content is totally the same. I'll copy the font from Windows paste it to my Mac and have a try tomorrow.

If the problem is not caused by the font file, and Chrome / Firefox has the same issue, that might caused by the OS.

[Erimus-Koo]

I tried reinstalling the TTC font file that I copied from my Windows to my Mac, but the problem still persists. Therefore, I need to consider that there may be an issue with macOS. (Because Chrome & Firefox have the same problem) My macOS version is Sonoma 14.0.