CODEWITHSUNDEEP
cssfontsfont-facewebfontsgoogle-webfonts
steros
steros

Reputation: 1924

fonts render differently on GoogleFonts than on my page

I include say "Noto Sans" or "Ubuntu" on my webpage via css "@import". If I compare the rendering on my page with the rendering on the GoogleFonts page it looks different for both fonts. Even though I paste the same text into GoogleFonts and choose the same size, same background, same color.

Here is a picture: (especially visible with the "A") enter image description here

Any idea if there is a setting I miss? As you can see neither the weight nor the size matches. Especially the weight seems to be a problem. Comparing "Noto Sans" the font with the same weight looks much thicker on my page. I downloaded the fonts from google into my system. But this also applies if I delete these fonts and the browser uses remote fonts. I use MacOSX but checking in Browserstack it seems that the problem is effective in several browsers. I tested in Win7 with IE9 too.

Upvotes: 0

Views: 165

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

Not sure about the IE browsers, but have you tried adding -webkit-font-smoothing: antialiased;? Google also uses -ms-text-size-adjust: 100%; for IE.

Upvotes: 1

Related Questions