@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.)

Answer 2

There is a CSS3 property 'font-smooth' supported by webkit. Have you tried that?

Answer 3

To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

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

Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.

Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration

<font-face units-per-em="2048" ascent="1900" descent="-510" />

You can change the value for ascent and get it to match the other font format versions.

Answer 4

I've found another simple solution for my case.

I have Microsoft Windows 7 SP1 & Goodle Chrome 23.0.1271.64 m and using FontAwesome for my web application. To enable anti-aliasing for FontAwesome in Chrome simple remove do as maximo said - start src definition with svg font, but also remove font name after the svg hash. Simple convert this:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype'),
       url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

to this:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.svg') format('svg'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Does it help?

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

Answer 5

After many hours of looking for a fix I found a perfect fix. It costs an annual fee, however if you are a web designer with multiple sites this is a must have!

www.typekit.com

It works on ALL modern browsers and it fixes my pesky problem with Chrome so I'm happy. It's worth the small fee to have great type no matter what your visitor is viewing on. Start to have an issue, contact them and THEY fix it for you. Peace of mind for almost any typeface.