Chrome font rendering issues

So this is a weird little bug in Google's Chrome browser that I've come across whilst building my own website. I'm talking about Chrome's strange rendering of web fonts - or lack of antialiasing - that leaves the fonts with jagged edges and looking rubbish!

As a designer, the introduction of web fonts - @font-face and Google's own webfonts - has allowed us to give websites great typography - whilst keeping SEO compatibility to its maximum. These fonts look great and are cross-browser compatible - even down to IE6 - or so I thought...

So here is what is happening. I've implemented fonts on my webpage. In Firefox, IE and Safari, looking good. Then I thought I'd just check Chrome - but knowing that the fonts are Google's own - there shouldn't be an issue... Ahhh!! Now that isn't how it's supposed to look? The fonts have jagged edges, look heavier than they should be, and quite frankly look awful. After trawlling the web for more than a few hours, this seemed to be a known issue. And there are two ways that people seem to be using to fix this...

1) The shadow way. The idea is to try and soften the edges of the fonts utilizing CSS3 shadows. There are lots of sites out there to explain this - but for me, this didn't work. The fonts still looked bad - but had a little glow. Not really what I wanted. The thing that worked for me is...

2) SVG rendering. So this fix is using the @font-face web fonts. To use these fonts you have to call the font files in the CSS. This is a standard call...

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg#chunk-webfont') format('svg');}

It seems that Chrome doesn't render the TTF fonts so we need to get Chrome to use the SVG font files first. To do this we can tell Chrome to use them as the initial font to implement...

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg#chunk-webfont') format('svg');
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg#chunk-webfont') format('svg');
}
}

This didn't work totally for me either. There were still jagged edges and the font positioning had shifted. The main fix for this issue - which it's taken a while to find is two fold...

Firstly, on the @font-face standard SVG call line... url('../webfont-name.svg#webfont-name') format('svg'); -  take out the #webfont-name so it reads as url('../webfont-name.svg') format('svg'); And most importantly...

Font-weight: normal; on ALL tags. Chrome seems to put on a heavier weight to all fonts - this clears this and makes the fonts render perfectly! :) You could do the reverse - put font-weight:normal; in your CSS body tag - then you'd have to specify a weight for headers. Either way should work fine.

I've also noticed that this part of the fix also makes Google Fonts render properly too - so a double bonus! 

Now the fonts are all rendering like they should, I can get on with building the site properly!! Hopefully this post will help other people out too.