How to fix Google font rendering issues in Chrome on Windows

March 26, 2014 | CSS | Web Design | Web Fonts

The problem:

A client asked me why the font on his site looked choppy and rough in Chrome on Windows 7. After searching around, I finally found out that Google renders fonts weirdly on Windows. Until this point, I was using a head link to load the font straight from Google. This method was working great in both Chrome and Firefox on Mac.

The solution:

  1. Download the font from Google fonts.
  2. Upload it to Font Squirrel, and use their Web Font Generator to create and download your own web font kit.
  3. Put the fonts on your own server and use @font-face to load them.

    Example:

    @font-face {
    font-family: 'fenixregular';
    src: url('fenix-regular-webfont.eot');
    src: url('fenix-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fenix-regular-webfont.woff') format('woff'),
         url('fenix-regular-webfont.ttf') format('truetype'),
         url('fenix-regular-webfont.svg#fenixregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

The reason? Chrome uses SVG to render their fonts, and Google Fonts’ suggested method of loading the font from their servers must not deliver SVG to Chrome.