Why is the font-style bold not correctly applied in Chrome on this website

Question

I have the problem that a font-style is not correctly applied. It seems that the browser just makes the font bold by himself which results in a ugly faux bold.

In Firefox everything works fine. The problem is only in google chrome.

Here is a link to a demo: http://www.webagenturcms.ch/view/testbootstrapflo.ch/de/Home

The fonts are all loaded but it is not working. What am I missing?

Screenshot in Chrome on Mac

[Screenshot in Chrome on Windows][2] link 2 as comment…

Saturated

[2]: i.sstatic.net/0M4Qc.png – Saturated

Shows up fine in my Chrome browser - Version 51.0.2704.84 (64-bit), also on Mac OS. – Inspirational

Thanks for testing. I have version Version 51.0.2704.84 (64-bit) as well and it looks like on the screenshot. I tested it on another mac as well. Could there be a problem if the font is locally installed? I think both mac have this exact font local for screendesign as well. – Saturated

Answer 1

Your problem of 2016 still exists in 2020 as I noticed recently. So I think that it's still ok to answer this old question.

The solution is to define a special css property for webkit based browsers on MacOS. Please insert in your body tag the following css:

-webkit-font-smoothing: antialiased;

This changes the font appearance on MacOS in Safari and Chrome in a way that it looks like Firefox on MacOS and Chrome on Windows. As a sideeffect, the normal font will be displayed a little bit thinner.

BTW The website of apple.com uses this css setting, too.

The background is described in detail here: https://www.uv.mx/personal/gvera/stop-fonts-looking-bold-on-mac-browsers/

Short abstract of the solution: "Mac uses subpixel rendering to increase the apparent resolution of the display, which helps render crispier, sharper text. That’s why the text seems bolder, even if it is not set. So, on Safari and Chrome browsers, you can turn subpixel rendering off and instead uses the standard antialiasing technique to make fonts look smoother."

Baldachin

Still an issue in 2022. Chrome is not displaying bold text on Mac. Adding -webkit-font-smoothing: antialised to the body-tag fixed it for me. Thanks! – Sosthenna

works for me as well – Magnoliamagnoliaceous

Answer 2

I may have found the solution: https://bugs.chromium.org/p/chromium/issues/detail?id=31833

There seems to be a bug in Chrome with @font-face.

Saturated

That bug was fixed on 26 September 2011. – Perpetuate