@font-face rendering issue in Chrome for PC

[chrisburton]

@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;`

[cherie]

Ok, so i have now tried:

-webkit-font-smoothing: antialiased;

-webkit-text-stroke: 1px transparent ;

@media screen and (-webkit-min-device-pixel-ratio:0) {
@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;
}}

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

So far all areas that i have applied it h1, h2 etc and body still do not render the fonts correctly. Even the standard font family:

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

[cherie]

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

[chrisburton]

@cherie From what I’ve read, you cannot use @font-face inside Media Queries (some bug issue).

Edit: The bug causes a few browsers not to display the font.

It could be the optimization of the font itself so why don’t you take a screenshot and upload it to http://tinypic.com and paste the URL here so I can take a better look.

[Rocko]

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;

}}

[chrisburton]

@rockmole Why would you set @font-face twice with the same font format?

[Rocko]

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.

[chrisburton]

Remove the media query and it should still work.

[Rocko]

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](http://www.rockomole.com/misc/font-rendering-chrome.jpg “Font Rendering Chrome PC”)

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 :/

[Rocko]

*antialiased

[chrisburton]

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

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

[chrisburton]

By the way, did you convert that font using Font Squirrel?

[Rocko]

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

[chrisburton]

@Rockmole That’s weird. Sometimes messing with the settings can have an effect on the outcome of converting the files. If you didn’t, I bet it’s just due to not being optimized properly.

[Rocko]

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?

[Author]

Posts