CODEWITHSUNDEEP
cssfontsfont-facegoogle-font-api
Whitenoise
Whitenoise

Reputation: 125

Installed font from Google looks different than font gained through their API?

I'm going mad with an issue and I wonder if anyone can help. I'm currently using http://font-combinator.com to see what different style of fonts look like together. This website simply loads fonts in from Google Fonts and displays them onscreen.

Now I choose a font, think it looks ok, and head over to Google and download it. I then paste that font into my local font directory so I can see what it looks like locally, and add it's name in my css like so:

font: 100%/1.6 "Font name here"; 
color: #bbb;
font-weight: 400; (for example)

Problem is when I look at it in the same browser as I did the Font Combinator, it looks rougher and more jagged. No settings have been changed. The font on both sites is 16px. For reference I am using Windows XP with cleartype turned off (I don't like it).

Now if I link to Google Fonts directly through my website, then it displays the same as on the Font Combinator. I don't understand how installing the same font that Google uses produces a different result? Ideally I would like to host the font on my website myself, but can't see a way around this? Am I doing something wrong, or is there something I've missed? Thanks!

For reference I am using the following reset:

html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}

Edit: @Fontface code that I've used, that does seem to look the same!

@font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf') 
format('truetype');
}

(just picked this font as an example)

Upvotes: 4

Views: 2947

Answers (2)

Stuart
Stuart

Reputation: 1168

This is potentially a duplicate of this question but this was my answer to that:

Fonts render differently based on:

  • Screen/Monitor resolution
  • Browser
  • Operating System
  • Size of use and hinting

Without seeing your code the only things I can recommend are:

  • Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).

  • Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.

  • Assuring you are using the actual versions of the fonts and not just applying CSS styles.

  • If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.

Some people also recommend not using the @import or direct link from google. Perhaps try downloading the file and using @font-face in your css. Hope this helps!

EDIT: If you’re hosting the font yourself — double check the @font-face call. Make sure you are calling all versions possible of the typeface. Also, Some browsers prefer certain formats being called earlier.

Upvotes: 1

jmelero
jmelero

Reputation: 93

I had same problem and it's a mess and hard to solve. The main problem is that the font you've downloaded is not actually the "same" that google webfonts provides. The font family is the same, but Google can provide it in different formats. The font that you've installed on your system is probably a .ttf file, that's a truetype font and Windows can use it. But, if you look the css that Google serves you when you includes a font, it's something like this:

For this: 

http://fonts.googleapis.com/css?family=Open+Sans

you get this:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

As you can see, if there is no local matching, it requests the font BUT in woff format, it's the same font but in another font format. In fact, I've done this example using chrome, but the css that google provides choose the best font format depending on browser and SO that made the request.

That's the reason why you see same font family rendering so different, the local one is .ttf, the another could be woff, svg (I think for IE), and there is other posibilities. And same font on different formats looks different, sometimes too much different.

I think the best choice is to create that css by yourself, not asking it to Google, and remove the local part, but it's important to add the other formats, other way it will not work on all supported browser.

Upvotes: 1

Related Questions