Font-weight issue with HTML renderer in webkit browsers - „Font was synthesized to be bold because no bold font is available.“

[Ratsbew]

Package

google_fonts

Existing issue?

• I checked the existing issues

What happened?

With HTML renderer in Webkit browsers all fonts with a font-weight above 500 get displayed incorrect and the following Warning gets thrown in the web-inspector: „Font was synthesized to be bold because no bold font is available.“ (see attachment 1). The fonts get displayed correctly in the expected font-weight and the warning disappears, when the inline style attribute: "font-weight: (e.g.) 600;" gets removed or when the value gets changed to anything below 600 (e.g. "font-weight: 500;") in the web-inspector (see attachment 2).

With CanvasKit renderer there is no such warning in Webkit browsers and the fonts get displayed correctly.

In Chromium based web browsers the fonts get displayed correctly with both - HTML and CanvasKit web-renderer. The inline style attribute e.g.: "font-weight: 600;" gets ignored - removing it makes no difference - the fonts get always displayed correctly (also with the correct font-weight).

Attachment 1:

Attachment 2:

Steps to reproduce:

1. Add GoogleFonts to pubspec yaml.
2. Import GoogleFonts
3. Use any GoogleFont with a font-weight above 500
4. Run the app with HTML web-renderer
5. Open the app in a webkit browser (e.g. macOS Safari Version 16.5)
6. Open the web-inspector and find the text element in the Shadow Content
7. Switch to inspect font

Relevant log output

No response

[pixelsnis]

Having the same issue :/

[husainazkas]

Facing same issue