The rendering looks fine to me.

Yup, that's how Chrome renders the font, unfortunately.

Give this a read: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/

You could try seeing if using -webkit-font-smoothing: antialiased; helps at all.

SOLVED: by adding text-shadow with these values


text-shadow: 0 1px 0 rgba(0,0,0,0.01);

try removing the font-weight property in the css selectors rules. You can leave it for the @font-face but will not need it unless you have more @font-faces with the same name. It is not needed in the css tags selectors since you are calling the only font family with that name and it is already a ligher font...so defining font-weight is not needed.

Not saying this will cure the issue but worth a shot.

If any of you are still looking to improve your webfont rendering in Chrome, you may want to take a look at this post on our blog. It does have a solution similar to @rockomole's suggestion: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Chrome was cutting my icons in half. IE wasn't working because of a bad woff conversion. Another long day.

Paul Irish's worked for me:

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

And I found this link, so watch out for sneak Arial attacks:

http://sixrevisions.com/css/font-face-web-fonts-issues/

@cherie Link?

@cherie What text exactly are you having issues with? It's hard to debug since you're code is inline styled. Have you tried the following:

-webkit-font-smoothing: antialiased;

I am using a mixture of:

-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 1px transparent;
text-rendering:optimizeLegibility;

While its not perfect, it is a lot better

Have you tried this? I'm not sure exactly why, but this has worked for me various times:

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
        font-family: 'ResagokrLight';
        src: url('../fonts/ResagokrLight-webfont.svg#ResagokrLight') format('svg');
        font-weight: normal;
        font-style: normal;
}}

Not sure to be honest :P I came across it in another forum some time ago and decided to give it a shot. My fonts then started rendering fine in Chrome. It's possible that it's not bulletproof, but from my tests (on Browserlab and on various friends computers) this seems to work well.

Without the media query it won't render aliased on Chrome for PC. Here are screenshots I just made. Right shows it with media query included, left without.

Screenshot

These were taken from Browserlab, but I've seen the same directly from a PC. I'm baffled as to why this should work, but it seems to be doing the trick.

I'd post a link to the forum where I found this, but I can't find it anymore :/

@rockmole use -webkit-font-smoothing: antialiased;

and if that doesn't work, move the SVG version above the woff.

I'm afraid -webkit-font-smoothing has no effect in Chrome PC, and moving SVG above WOFF makes the font fail to load (FF & Safari mac)

and yeah, I used font-squirrel's code generator

From what I've read, it's a recurring problem with Chrome. It struggles to render a lot of fonts properly, if not all (even Google fonts, ironically). I'd put my money on Font-Squirrel's optimization being right and that Google needs to do some work on Chrome...

Why is it that @font-face shouldn't be in media queries?

The problem with Chrome for Win is the font rendering/smoothing engine. It does not work well with WOFF or TTF files. For instance, on this website: http://goo.gl/Y5hSu you'll see they have a standard FontSquirrel-esque @font-face rule. However, for some reason, the WOFF file is not being served. Either it's just not there or they haven't configured a MIME type for it and their server is rejecting it. Either way, the WOFF file isn't available for their web font and in Chrome for Win the fonts look great, antialiased and smooth. That's because Chrome is using the SVG font since it can't find the WOFF file. The SVGs probably use a different rendering engine that the fonts.

That's why, adding an extra @font-face rule AFTER your first one with just the SVG source will override the original one if the browser supports SVG fonts at all.

You might try experimenting with your original @font-face rule and see if placing the SVG source last in the list works as well. So you could try this:

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