[Solved] Font face weight rendering issue on OSX.

[gravitas]

Hi All

Ive been using @font-face on a new design, all has been good but im getting inconsistent font weight (basically all fonts have a bold weight even though I have set to normal) results in OSX. After a bit of searching I found a solution for Webkit ‘-webkit-font-smoothing: antialiased;’ but I cant find a solution for Firefox or even better a cross browser solution.

Thx in advance.

[Senff]

If they all have a bold weight, why not just add font-weight:normal; to the declaration?

Though, in essence, I think it’s something we just have to accept that different browsers render embedded fonts differently.

[chrisburton]

That and most are not even hinted for the web. Simply why I love H&FJ

[gravitas]

@senff Read post again, they are set to normal already.

[Senff]

@gravitas Sorry didn’t see. Other point still stands though.

[chrisburton]

@gravitas I came across this http://dave-bond.com/css/font-too-bold-on-a-mac/

[gravitas]

@senff Im not referring to the different way OS’s handle antialiased text but a core difference in the way the font is rendered… see link.

http://dl.dropbox.com/u/504792/fonts.png

[gravitas]

@ChristopherBurton thanks I tried that before posting here but it didnt work for me.

[chrisburton]

Do you have a link to the page?

[gravitas]

No its on local system

[chrisburton]

Hmm. What typeface are you using?

[gravitas]

http://www.fontsquirrel.com/fonts/merriweather

[chrisburton]

@gravitas Is it doing it here also? http://www.fontsquirrel.com/fontfacedemo/merriweather

[joshuanhibbert]

It sounds like you are experiencing expected behavior. The image you linked to looks completely normal (OSX on the left and Windows on the right). Windows and OSX render fonts differently, and most typefaces appear heavier on OSX. For instance, compare the weights on this page (under the ‘Browser Samples’ tab): https://typekit.com/fonts/chaparral-pro

I think you said it best yourself:

Im not referring to the different way OS’s handle antialiased text but a core difference in the way the font is rendered.

You have basically answered your own question without realising it. The different OS’s (and browsers) use different rendering engines, that’s just something we have to live with! Webkit has a font-smoothing property for text, whereas Firefox does not.

[gravitas]

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

[Author]

Posts