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

A fix has been suggested here by calling the .svg file first, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Answer 2

-webkit-text-stroke: 0.5px;

use it only on large text, since it will affect your page performance.

Answer 3

Answer by Tom & font-spring didn't do it for me for some reason. This fix by Sam Goddard did though :

After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:

// font-face inclusion
@font-face {
  font-family: 'font-name';
                src: url('path-to-font/font-name.eot');
                src: url('path-to-font/font-name.eot?#iefix') format('eot'),
                url('path-to-font/font-name.woff') format('woff'),
                url('path-to-font/font-name.ttf') format('truetype'),
                url('path-to-font/font-name.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.

// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘font-name';
    src: url(‘path-to-font/font-name.svg’) format(‘svg’);
    }
}

Answer 4

i have tried many ways: -loading the svg with font-face -webkit-font-smoothening ...

after

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

the rotating was smoother but the main problem hasnt gone.

For me the solution was adding:

-webkit-text-stroke: 0.5px;

Answer 5

I develop in Firefox. My experience is that FF displays ttf fonts very well without any extra rules (beyond the @font-face calling the url for the font file). Chrome, however, is a different story. Even with with the -webkit-font-smoothing: antialiased; rule it still displays any font quite raggedly. Safari doesn't seem to have that problem, so it's not inherently Webkit that can't render a font cleanly, it's a Chrome problem.

I haven't tried adding the -webkit-text-stroke: 0.5px; rule, but will.

Of the answers above I really like Tom Sarduy's answer best. Aside from a good description of the problem, he gives a great @font-face stack to use to cover all the major browsers.

Answer 6

I've tried a number of solutions and finally came up with one that works with newer versions of Chrome which don't fall for changing the order of the files:

Essentially, I moved the TTF file into a Mozilla specific section.

@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');
}
@-moz-font-face {
    font-family: 'MyWebFont';    
    src: url('webfont.ttf')  format('truetype');
}