Google web fonts looking choppy in Chrome - how to apply the fix

Question

This is a general issue, and it seems like there is a solution. Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Problem is, that I'm using google web fonts, and importing the font like this:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

And I dont know, and cannot find out, how to import it with the @font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.

Hope you can help.

Crashland

Answer 1

You'll have to host the fonts yourself if you want to apply this fix.

Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

If you actually make the request yourself using curl:

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic

this is what gets sent back:

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 400;
  src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 700;
  src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.

Then you can use the suggested fix from here, referencing the font files you downloaded:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘webfont.svg#svgFontName’) format(‘svg’),
    url(‘webfont.woff’) format(‘woff’),
    url(‘webfont.ttf’)  format(‘truetype’);
}

Jamnes

Thanks alot for your answer! I´ve been fiddling with it for some time now, and "almost" got it to work. Problem is, that with the new self-hosted font method, all browsers seems to render the font differently than the original google stylesheet request link. Firefox and IE renders it a bit larger and more fat/bold, and Chrome seems to render it a bit better, but also not quite right. Please refer to the example image below. !gadaffi.dk/example.jpg Any idea? :/ – Crashland

As I mentioned, Google webfonts uses browser to detection - so it will send back something slightly different, tailored to browser of the user that is making the request. There's no perfect solution to this. My advice would be to generally stop aiming for pixel perfect matching cross-browser - it's not supposed to work that way. – Jamnes

Seems like since this is a Windows / Chrome issue they could either fix the DirectWrite issue with the browser, or as mentioned above fix the svg order on fonts google apis. Either way, mine looks like it passed thru a wood chipper on windows 8 + chrome. – Morin

Answer 2

Did you do a proper reset of all styles?

Your inconsistent rendering experience can be caused by the browser defaults.

A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css. Another way to reduce inconsistency is to use normalize.css.

The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.

Differences between both are explained here by the developer of normalize.css.

If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.

You can read about font weights here: http://css-tricks.com/watch-your-font-weight/ You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.

Vernettaverneuil

Answer 3

Add this to your stylesheet for each element.

opacity: .99;

For example -

p, li { 
  opacity: .99; 
}

I have no idea why this works but it did.

Cyrie