[Solved] Font face weight rendering issue on OSX.

[joshuanhibbert]

@gravitas I assume that you mean the Safari version (with font-smoothing enabled) is on the right? Once again, that is expected behavior. Firefox doesn’t have that property available, so unfortunately you are going to have to live with the heavier appearance.

If you just can’t deal with it—and you have a typeface that comes with multiple weights—then you could always use JavaScript to detect the browser and set font-weight: 100; for Firefox.

[chrisburton]

I’d go with Georgia (better looking). That’s all I have to offer.

[gravitas]

@joshuanhibbert Both fonts are on OSX, the left is safari with the ‘-webkit-font-smoothing: antialiased;’ fix applied and right the render in Firefox.

[joshuanhibbert]

@gravitas -webkit-font-smoothing: antialiased; makes a font appear thinner, not thicker (see here: http://maxvoltar.com/archive/-webkit-font-smoothing). And wasn’t your original complaint that fonts appeared too thick in Firefox? So if the fix for webkit actually makes fonts thicker, then I have no idea what you are asking.

As an aside; repeating a comment verbatim doesn’t help me understand it any further.

[gravitas]

@joshuanhibbert Corrected left/right in post above, the repeat post was a ‘repeat post’ computer fart.

I understand that there is a difference in how different OS’s render text, im just not convinced that the size difference is down to this fact (im might be wrong) .

I would appreciate if someone could see if there is a noticeable difference between renders of http://www.fontsquirrel.com/fonts/merriweather on a PC and Mac, just want to see if its specific to my OSX system.

Thx

[joshuanhibbert]

@gravitas Right, that makes more sense now :)

If you compare the browser samples of every font on Typekit, you might change your mind. OSX font rendering is well known to be heavier than Windows. I’m fairly confident that you aren’t experiencing an issue at all, simply differences in rendering. I work with type regularly, and this all sounds completely normal to me.

On Mac OS and iOS, we hardly have any control over the rendering, which is acceptable (since it’s generally very reliable). One problem is that fonts generally render too heavy. Maybe some day, Web font services can improve the consistency by serving slightly heavier or lighter fonts depending on the platform.

Quote source: http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

As further evidence, here is the default rendering of Merriweather on Firefox (left is OSX, right is Windows): http://cl.ly/1T0v262c3v3T29220F1z

[ipompa]

Hey @gravitas, im wondering if your problem is the same as mine, i’ve a weird stuff happening here, given font is not rendering quite well on my browser, and is not the problem about the website because it renders fine on another computer, doesn’t matter wich OS (windows, linux, osx). Take a look at this thread i made on r/webdev for further details, maybe we are dealing with the same problem. I’ve been looking for solve this problem but i haven’t, i wondering if i remplaced by mistake an OSX system font..

Thread: http://www.reddit.com/r/webdev/comments/p1jm8/help_needed_with_issue_about_cufon/

[Djenan]

Setting this CSS property will fix the ‘too heavy’ font issue on Firefox on Mac:

-moz-osx-font-smoothing: grayscale;

I hope that helps.

[Author]

Posts