by Dwayne | General

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

Last updated: October 26, 2015

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 */
}
 

Dwayne

 

24 thoughts on “A Solution To Stop Font Face Fonts Looking Bold on Mac Browsers”

  1. Thanks a mill for that, great tip! Really was driving me crazy with that strange (Mac only) quirk with @font-face fonts!!

  4. hey wonderful

    doesn’t seem to work for firefox… even -moz-font-smoothing…
    do u know how to make it work?
    –
    thanks

  5. Saved my life. Font face fonts are fucking annoying, it only seems to happen for certain font face fonts, most are okay. Thank you!

  8. Haha, Firefox is a bit troublesome. I don’t have a solution for that yet, been looking into it though. Firefox has some serious issues when it comes to rendering font face fonts (only particular ones though). Let me know if you sort it out.

  21. Pingback: Fixing The Font Face Faux Bold Issue In Webkit | Figurated

Leave a Reply

Your email address will not be published. Required fields are marked *