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

have a screenshot ? as it looks identical in Opera 12 and Chrome 17, both on windows. — c69, Jan 29 '12 at 01:09
I don't recommend doing this in order to fix it, just to troubleshoot - does it look more smooth, if you move the svg format above iefix? At least in my version of Chrome (16.0.912.77), anti-alias isn't applied if Chrome picks ttf or woff. — JimmiTh, Jan 29 '12 at 01:54
@ c69 Okay. I have a chrome and a firefox on windows screenshot. www.ambergoodwin.com/images/chrome.jpg www.ambergoodwin.com/images/firefox.jpg @TheKaneda I tried what you suggested and it helped it. It smoothed it out the way I want it to be, however IE renders it as just plain bold and black now. So what would this result mean? — kia4567, Jan 29 '12 at 02:48
What version of Chrome? It's only recently that a bug was fixed, where ClearType being turned on in Windows actually turned anti-aliasing and hinting *off* in Chrome for everything except SVG (which uses an entirely different renderer). In version 16, anti-alias *is* applied and the text looks OK: http://dl.dropbox.com/u/14034871/chrome16.png — JimmiTh, Jan 29 '12 at 03:36
WOW. I love dropbox. Haha. I haven't really looked into it much but after you posted your link I was curious and this is so much easier. So thanks for that. ;) Anyways, weird thing is, I'm running Chrome 16.0.9 I'm running Windows XP though how bout you? I'm baffled as to what to do... [1]: http://dl.dropbox.com/u/43287957/Chrome-16.0.9.jpg — kia4567, Jan 29 '12 at 06:41

score 16 · Answer 1 · edited May 23 '17 at 12:16

16

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

edited May 23 '17 at 12:16

Community

1
1

answered Jan 31 '12 at 21:20

maximo

1,101
9
16

I've actually tried this and it DOES work, however then I loose the actual ie fix and it turns from this specific font face to a bolder and blacker regular font in all versions of ei. Would you know what to do about the new ei issue? IE 8 ---> http://dl.dropbox.com/u/43287957/ie8-WINDOWS.jpg FF for MAC ---> http://dl.dropbox.com/u/43287957/firefox-MAC.jpg Chrome for WINDOWS ---> http://dl.dropbox.com/u/43287957/chrome-WINDOWS.jpg – kia4567 Jan 31 '12 at 23:53
1

I'm not sure what the IE fix is. I've been using the font squirrel @font-face generator and just swapping the line mentioned above. You can see it at: http://bit.ly/yGMCvg – maximo Feb 01 '12 at 21:02
Then follow the instructions posted here: http://stackoverflow.com/questions/5477521/font-face-generator-not-font-squirrel – maximo Feb 01 '13 at 01:45
2

This doesn't work in IE. In any `@font-face` rule, the EOT file **always** has to be first. No other browser will use the EOT file, and the IE rule must be first or else IE will ignore the whole thing. So put the SVG line *after* the EOT file and it'll work. – Pointy Feb 21 '13 at 22:53

score 2 · Answer 2 · edited Aug 12 '13 at 23:27

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

If i do your fix @karminski, then the font wont be displayed in Safari (WIN) and IE (WIN). So no, sadly this isn't a fix. — Jeremy Zahner, Dec 06 '12 at 13:20
@JeremyZahner that's because the suggestion is implemented incorrectly. The SVG line needs to be below both the EOT lines; if it is then it'll work in IE. However, Chrome has a mysterious bug with SVG fonts that cause layout to get totally messed up in rare, unpredictable situations. — Pointy, Feb 21 '13 at 22:52
Using SVG all the time isn't the best way, since SVG lacks hinting information. Without hinting the font looks more blurry than it has to on systems with font-smoothing enabled. Therefore I wrote [a small script called Font Smoothie](https://gist.github.com/letorbi/5177771), which detects if font-smoothing is enabled and corrects the CSS only if needed. I also created [a webfont generator named Fontie](http://fontie.flowyapps.com/), which takes a otf or ttf and generates a package with proper hinted webfonts, CSS and Font Smoothie for you. — Torben, Jan 31 '14 at 18:16

score 1 · Answer 3 · answered Oct 08 '13 at 12:16

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.

Pretty sure this just helped me out a lot. my fonts would get all crammed together (in chrome) when in a list, and then would go back to normal after many refreshes. So it was very hard to find out why, since sometimes it would just start working. I just changed it to use media query and so far so good. Hope it stays! — Sackling, Nov 18 '13 at 19:00

score 1 · Answer 4 · answered Jan 29 '12 at 01:18

1

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

answered Jan 29 '12 at 01:18

shaunsantacruz

8,903
3
19
19

score -2 · Accepted Answer · answered Feb 01 '12 at 20:41

-2

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.

answered Feb 01 '12 at 20:41

kia4567

603
4
12
30

What I've found to be working as well is making it into a wordpress website (which is what I recently started doing with all my websites) and download the WP Google Fonts plugin. It fixes all this mess in other browsers, it's free and very simple! – kia4567 Dec 09 '12 at 20:32

@font face choppy font in Chrome

5 Answers5

Linked