Chrome Font Antialiasing SVG trick doesn't work

Question

I'm trying to smooth fonts in Chrome on Windows by forcing Chrome to use SVG files as described in this article here: http://const.fr/chrome-webfonts-antialiasing-fixed.

For my test I used the CrusoeTextBold from the OpenFonts library website here: http://openfontlibrary.org/en/font/crusoe-text. My css code is pasted below.

If I look at the sample text on the OpenFonts lib web site (which is not an image) it look actually really good in Chrome although they appear to be using the ttf version. On my web site I'm using the SVG version and it looks crap-tastic! (see image below). I just don't understand why my sample looks so edgy compared to theirs...

Any help greatly appreciated. (I've been trying to figure this out for days.)

Thanks!

@font-face {
    font-family: 'CrusoeTextBold';
    src: url('../fonts/CrusoeText-Bold.eot');
    src: url('../fonts/CrusoeText-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CrusoeText-Bold.woff') format('woff'),
         url('../fonts/CrusoeText-Bold.ttf') format('truetype'),
         url('../fonts/CrusoeText-Bold.svg#crusoetext-regular') format('svg');
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CrusoeTextBold';
        src: url('../fonts/CrusoeText-Bold.svg') format('svg');
    }
}

Answer 1

Ok, it seems like I resolved the issue. In the second statement the src: url also needed the font name, in this case '#CrusoeTextBold' so that the complete statement looks like this:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: 'CrusoeTextBold';
        src: url('../fonts/CrusoeText-Bold.svg#CrusoeTextBold') format('svg');
    }
}