Menu
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.
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?
245
Well, Windows and Mac each have their own specification for the ascent and descent values. On a Mac, a font looks for the ascent and descent in something called the HHead table, whereas on Windows, a font looks for these values in the Win table.
Usually this indicates one computer doesn't have the font installed correctly, but it can also be tripped up by force-font settings and programming errors. Most problems can be resolved by installing the correct version of the font or adjusting the overriding system setting.
You can't use an Apple TrueType font directly on Windows. You have to convert it to a Windows TrueType font, as the Apple TrueType can only be used on Mac devices.
If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences.
Try to use:
-webkit-font-smoothing: antialiased;
That helped me in my case to make fonts on Mac and Windows looks the same.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With