Grow your CSS skills. Land your dream job.

Font appears a LOT bolder on Mac than PC

  • # June 14, 2011 at 1:32 pm

    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

    # June 14, 2011 at 2:01 pm

    Have you tried this:

    -webkit-font-smoothing: antialiased;
    # June 14, 2011 at 3:26 pm

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

    # June 14, 2011 at 3:39 pm

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

    # June 14, 2011 at 3:41 pm

    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?

    # June 14, 2011 at 3:43 pm

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

    @OniLinkCr: That should work.

    # June 14, 2011 at 3:47 pm

    Within the font-family then? :p

    # June 14, 2011 at 3:52 pm

    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?

    # June 14, 2011 at 4:51 pm

    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.

    # June 15, 2011 at 3:06 pm

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

    # July 4, 2011 at 4:17 pm

    it works perfectly for Safari but not for Firefox…

    even with -moz-font-smoothing…

    does anyone knows what to do?

    # July 4, 2011 at 7:01 pm

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".