css - @font face choppy font in Chrome

Question

I have my website that I am creating here and it's looking good (right now CSS3 media queries aren't working for IE) but I find my @font face is broken and looks like crap in Chrome for Windows (so far that's the only major one I've found).

I've searched it up and found CSS3 rbg fix that is supposed to work however it did nothing for me. Did the bulletproof fix from Paul Irish however then my font breaks in Android. I've been researching this fro a couple hours now but can't seem to find anything that will work. I've heard of Cufon but I'm trying to stick with @font face as it's just for Chrome that I'm having this trouble.

I went to font squirrel and got the font face kit for the font I am using so it looks like this

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

}

It works with most of the browsers (again I haven't had a chance to test EVERY single one, but I have checked it on IE 6-9 and it looks good, FF 9 for Windows and FF 8 for OSX, Safari Opera and it looks great. Chrome for windows is just not working well with the @font face command.

Does anyone have advice as to what I can do to either make it look better or fix it? (Aside from removing the @font face class and using regular font.)

Also, I could however end up using a conditional comment from Chrome to just view a regular font but then my HTML wouldn't validate eh?

So any help would be appreciated..

Answer 1

I've fixed this! Chrome likes it when you load the SVG line first. Just move that up in priority. Hmm... someone should tell Font Squirrel.

https://stackoverflow.com/a/9041280/1112665

e.g.

src: url('geosanslight-webfont.eot');
src: url('geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
     url('geosanslight-webfont.svg#GeosansLightRegular') format('svg'),          
     url('geosanslight-webfont.woff') format('woff'),
     url('geosanslight-webfont.ttf') format('truetype');

let me know if that works for you. cheers!

(Edited by simoneast: moved EOT version to top, otherwise it breaks IE.)