Re: @font-face rendering issue in Chrome for PC

[thetrickster]

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;

}