Font appears a LOT bolder on Mac than PC

[immel]

Okay, so I’ve been Googling this for ages and I’ve read about all the usual problems, but this is not any of them.

It’s not the problem with light fonts on dark backgrounds appearing bolder. It’s not a problem with declaring font-weight, and it’s not about rendering differences.

I’m using the Colaborate font from fontsquirrel: http://www.fontsquirrel.com/fonts/Colaborate

Previewing the font on fontsquirrel.com using a Mac with Safari, it renders correctly, thin is thin, light is light etc. Once I put it on my own website it turns it bold. Ridiculously bold, as in there’s no doubt something is very wrong (since it works correctly on fontsquirrel).

On a PC there are no problems, everything works fine.

I have tried font-weight properties & the text-shadow fix, neither does anything. It remains bold. Yes, it’s light text on dark background. I have stripped my entire CSS file of font-weight properties, still nothing. I have tried other fonts, the same problems apply.

Does anyone have any idea about what I’m doing wrong? Is it something obvious?

Screenshots:
PC http://min.us/ldxbFq
MAC http://min.us/lbgqKS

[chrisburton]

Have you tried this:

-webkit-font-smoothing: antialiased;

[immel]

That did the trick! Thanks so much :)

I wonder why googling the issue didn’t come up with that result. Is this a common issue? Since I’m usually coding on a PC I’ve never really ran into this before (my client happened to be on a macbook and commented on how bold the font appeared to her).

[TheDoc]

Nice one – I didn’t know about that either!

[OniLinkCR]

Where is this property supposed to go Christopher? When you declare it using the font-face or within the declaration of the font family, etc?

[chrisburton]

You’re quite welcome. I do believe it is a common issue on some fonts, not sure about all.

@OniLinkCr: That should work.

[OniLinkCR]

Within the font-family then? :p

[chrisburton]

I don’t believe it has a specific place to go. If you have a web font and are declaring it using @font-face then, I would certainly use it there. Why add it multiple times in your CSS?

[immel]

I simply declared it on my body, underneath font-family. It solved all kinds of issues with different fonts. Weirds me out that it works fine in webkit on a PC without smoothing: antialiased;, but not on a mac.

[OniLinkCR]

Perfect, that’s what I wanted to know, where it should go on the body declaration, or the actual font-face property.

[baazooka]

it works perfectly for Safari but not for Firefox…

even with -moz-font-smoothing…

does anyone knows what to do?

[chrisburton]

That’s because it is for webkit browsers hence the prefix.

[Author]

Posts