A Solution To Stop Font Face Fonts Looking Bold on Mac Browsers

I’ve found the solution if you have ever used the font face technique and encountered an issue where the text looks bold on a Mac yet looks perfectly fine on Windows. It’s almost like the font size or weight is wrong. But, as you’re going to learn, that is not the issue.

As of 2023, I still encounter this CSS issue, specifically in Chrome on Mac. It’s only with certain fonts, but this issue doesn’t appear to have gone away entirely.

After spending at least 2 days finding a solution, I inspected the page and saw what default browser styles were being applied on a Mac. After changing every piece of CSS basically, I came across the -webkit-font-smoothing property, an annoying piece of code.

It appears that this property on Mac is troublesome for some font-faced fonts (for me, it was Avenir) as it makes the text bold, and I think it is due to the fact Mac already anti-aliases text and -webkit-font-smooth anti-aliases it even more.

Set the following in your stylesheet on whatever elements you are using font face on, and it fixes the issue:

-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac in Chrome/Webkit based browsers. */

Update

Firefox as of version 25 now has a property of its own to fix the issue in Firefox, finally. See the bug report here.

-moz-osx-font-smoothing: grayscale; /* Fixes font bold issue in Firefox version 25+ on Mac */

This leaves us with the final fix for Webkit/Chrome and Firefox:

.fix-font {
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac in Chrome/Webkit based browsers. /
-moz-osx-font-smoothing: grayscale; / Fixes font bold issue in Firefox version 25+ on Mac */
}