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

Also read...

Comments

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

  2. hey wonderful

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

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

  4. YES!!!!! This was driving me nuts!

    It worked for Safari 5.0.6 but not FF 9.0.1. But halfway there!

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

  6. Wow, thank you so much! this just saved my bacon. My boss will be happy, let me buy you a beer Dwayne!

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.