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