Web Fonts on Mac appear different to Windows

12
votes

I've chosen to use one of the many Google Web Fonts as the main font for my website. The website is being displayed on both a Mac and Windows computer yet the font appears slightly different in terms of their dimensions and spacial conformations on the page.

Demonstration of different outcomes

Link to the Google Font

The code in the CSS to apply the font is:

html, body {
    font-family: 'Lato', sans-serif;
}

just like how the font website suggests embedding the font into the website. (Also the font is linked within the header file as required).

The web browser I am using is Chrome in both instances, however the results stay the same if I use Safari on Mac or Firefox on Windows or any other assortment of browsers. It seems to be a system level thing going on here.

What options do I have to go about fixing this so that I can still use a Google Web Font for my website?

1
cssmacosfonts
Different browser and operating system combinations render fonts slightly differently. I don't think there's much you can do about it except provide ample room for variations. - Alexander O'Mara
Welcome to the world of font rendering. Didn't you see the sign at the entrance that said "not pixel perfect"? - deceze
same problem, linux vs windows ; my font padding is needed on linux, not on win... have to write 2 css... - singe batteur

1 Answers

5
votes

Try to use: 

   -webkit-font-smoothing: antialiased;

That helped me in my case to make fonts on Mac and Windows looks the same.