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

If you have ever used the font face technique and came across an issue where the text looks bold on a Mac and yet looks perfectly fine on Windows, I’ve found the solution.

After spending at least 2 days finding a solution it dawned on me to inspect the page and see 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 */
}