CODEWITHSUNDEEP
htmlgoogle-chromefontsgoogle-webfonts
User9123
User9123

Reputation: 85

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

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…

Upvotes: 5

Views: 10547

Answers (2)

Thorsten Albrecht
Thorsten Albrecht

Reputation: 121

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."

Upvotes: 12

User9123
User9123

Reputation: 85

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.

Upvotes: 0

Related Questions