Chrome for Windows, poor @font-face rendering

Question

I'm having an annoying font rendering issue on Chrome for Windows.

This is how @font-face renders under Ubuntu 14.04/Chromium 36

And this is how @font-face renders on Win7/Chrome 35

You might need to click on the picture to see the difference.

And this is the CSS:

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/SourceSansPro-Regular.eot');
  src: local('☺'), 
    url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/SourceSansPro-Regular.svg#sourceSansPro') format('svg'),
    url('../fonts/SourceSansPro-Regular.woff') format('woff'), 
    url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/SourceSansPro-Italic.eot');
  src: local('☺'), 
    url('../fonts/SourceSansPro-Italic.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/SourceSansPro-Italic.svg#sourceSansPro') format('svg'),
    url('../fonts/SourceSansPro-Italic.woff') format('woff'), 
    url('../fonts/SourceSansPro-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/sourcesanspro-semibold-webfont.eot');
  src: local('☺'), 
    url('../fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/sourcesanspro-semibold-webfont.svg#sourceSansPro') format('svg'),
    url('../fonts/sourcesanspro-semibold-webfont.woff') format('woff'), 
    url('../fonts/sourcesanspro-semibold-webfont.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/SourceSansPro-Bold.eot');
  src: local('☺'), 
    url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/SourceSansPro-Bold.svg#sourceSansPro') format('svg'),
    url('../fonts/SourceSansPro-Bold.woff') format('woff'), 
    url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Heuristica';
  src: url('../fonts/Heuristica-Regular.eot');
  src: local('☺'), 
    url('../fonts/Heuristica-Regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/Heuristica-Regular.svg#heuristica') format('svg'),
    url('../fonts/Heuristica-Regular.woff') format('woff'), 
    url('../fonts/Heuristica-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Heuristica';
  src: url('../fonts/Heuristica-Italic.eot');
  src: local('☺'), 
    url('../fonts/Heuristica-Italic.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/Heuristica-Italic.svg#heuristica') format('svg'),
    url('../fonts/Heuristica-Italic.woff') format('woff'), 
    url('../fonts/Heuristica-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Heuristica';
  src: url('../fonts/Heuristica-Bold.eot');
  src: local('☺'), 
    url('../fonts/Heuristica-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Heuristica-Bold.svg#heuristica') format('svg'),
    url('../fonts/Heuristica-Bold.woff') format('woff'), 
    url('../fonts/Heuristica-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

I've tried to move the SVG declaration on the second but it didn't help.

Fonts are properly rendered under IE11

Thanks for your help

Answer 1

The only way I have resolved the anti-aliasing issue for Chrome has been to force that browser to use the SVG fonts. This is not so much putting the SVG declaration in a particular order, instead you provide a Chrome only @media declaration and place the SVG font in there.

So, for example, your CSS:

@font-face {
  font-family: "myfont";
  src: url('myfont.eot') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg') format('svg');
}

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

I guess I don't need to point out that Chrome is the only mainstream browser that will pick up the -webkit-min-device-pixel-ratio condition. I have found no other rule (or combination of rules) that renders the font as well on Windows/Chrome as this does.

Now there are several things I should point out. One of them is that SVG fonts are larger in size (by quite some bit) so there is that hit, as Chrome can render WOFF fonts just that we don't want it to. Another thing is that you could 'probably' drop the SVG reference within the main @font-face declaration as it's only Chrome we need it for. The other main browsers will use EOT or WOFF so there isn't really a need for it to be there.

For more information regarding which browsers support which font format, use the Can I Use page (you can select the subtypes at the bottom of the browser versions).

Answer 2

use this

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}