• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

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

General · December 16, 2010

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

Leave a Reply Cancel reply

24 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Marc
Marc
11 years ago

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

0
George
George
11 years ago

I could kiss you. Thanks so much!!!

0
Pete
Pete
11 years ago

YES!! Oh my goodness this has actually been driving me crazy for months now. THANK YOU!! haha.

0
baa
baa
10 years ago

hey wonderful

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

0
Code Junkie
Code Junkie
10 years ago

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

0
Ezequiel
Ezequiel
10 years ago

I love you!

0
Mike
Mike
10 years ago

YES!!!!! This was driving me nuts!

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

0
Dwayne
Dwayne
Author
Reply to  Mike
10 years ago

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.

0
Leslie
Leslie
10 years ago

I hope someone finds a solution for Firefox.

0
matheus
matheus
10 years ago

<3

0
Prajwal Shrestha
Prajwal Shrestha
10 years ago

Fantastic due… thanks a mil…

0
Shane Helm
Shane Helm
10 years ago

The best code fix EVER!!!! I love you too!

0
praneeth hettiarachchi
praneeth hettiarachchi
10 years ago

Awesome! 🙂 save my day!

0
Alper
Alper
10 years ago

Try giving “opacity:0.99” to the text element for firefox on mac.

0
Homer
Homer
9 years ago

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

0
Joel
Joel
9 years ago

Brilliant! Thanks a million

0
Thomas Laker
Thomas Laker
9 years ago

You are a legend. I have spent the entire night trying to work out what was happening. Thank you so much!

0
Manisha Shah
Manisha Shah
9 years ago

Grate Solution

0
Bjørn Fridal
Bjørn Fridal
9 years ago

Thanks mate 🙂

0
edukaos
edukaos
8 years ago

Thanks so much!! I´ve looking a wile for a good solution like this!

0
Diego
Diego
6 years ago

Thanks a lot, well done!

0
Zack
Zack
5 years ago

You’re a total f’ing stud. Big ups! Thank you!!

0
David
David
4 years ago

Omg, you are a god. After 2 years i found solution. Thank you so much man!

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Web 3.0 may have died before it even started
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Calculate A Javascript Date X Months Ago With Vanilla Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • Which Neural DSP Archetype Plugins Should You Buy?

Recent Comments

  • Casey Milne on A List of WordPress Gutenberg Core Blocks
  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz