Google webfonts render choppy in Chrome on Windows

Question

I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and

Answer 1

It seems that Google might serve different woff files depending on the browser and OS.

I found that if I download the font from IE, it's about 10k bigger than if done on Safari from the Mac for a particular font. 43k vs 33k. Also, the IE version seems to look fine on the Mac, but the Mac version doesn't seem to work fine on the PC. The Mac version looks the worst in Mozilla Firefox on the PC.

Try this: http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic

SourceSansPro-Regular.woff PC version 27k

SourceSansPro-Regular.woff Apple version 24k

Answer 2

It could just be the font your using "asap" doesn't render all that well at certain sizes. I changed the size of your h1 from 3.5em to 50px and it looks a little better. May not be the perfect solution but I have noticed that a lot of google webfonts can be unpredictable

Answer 3

Update August 2014

Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.

Problem

The issue is created because chrome actually cannot render TrueType fonts with correct anti-aliasing. However, chrome still renders SVG files well. If you move the call for your svg file up in your syntax above the woff, chrome will download the svg and use it instead of the woff file. Some tricks like you propose work well, but only on certain font sizes.

But this bug is very well known to the Chrome developer team, and has been in fixing since July 2012. See the official bug report thread here: https://code.google.com/p/chromium/issues/detail?id=137692

Update Oct 2013 (Thanks to @Catch22)

Apparently some websites may experience intermittent spacing issues when rendering the svg. So there is a better way to skin it. If you call the svg with a media query specific to Chrome, the spacing issues disappear:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

First approach solution:

The Fontspring bulletproof syntax modified to serve the svg first:

@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');
}

Further reading:

• CSS properties that affect type rendering
• Smoother Web Font Rendering in Chrome for Windows
• How to Bulletproof @font-face Web Fonts

Answer 4

Another link reference for web font rendering in chrome -

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Answer 5

Had the same thing guys. Good in all browsers except chrome - even IE10 and 9 were fine. Dreamwaeevr CS6 also uses a similar version of fontsprings code, but has the svg at the end. Change it round for SVG before woff and ttf and all in the world is good. Tom is bang on with hos example there, in fact past that into your code and map paths to the fonts you need, and you're in business!

Answer 6

https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/

This post explains a little about google chromes experimental functions. Apparently enabling the "DisableWrite" option fixes the jagged fonts. This is obviously a fix PER machine and not on a full scale.