@font-face rendering issue in Chrome for PC

[chrisburton]

It depends. When it comes to webfonts there is a list of things that can cause issues. Google’s webfonts are not optimized for screen use. They are poorly hinted.

There’s a bug when putting @font-face in media queries. I can’t recall if it only effects the iPhone or webkit based browsers.

[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;

}

[revoxis]

@thetrickster

I have to say that worked to smooth the font in chrome (Win7) however then suddenly firefox is showing errors by not showing the icons but numbers (wich the icon is attached too inside the font)

Another thing wich i don’t understand is that when using icomoon app when i download my font and insert it it works on Chrome, IE and Safari. However it doesn’t work in Firefox and Opera it will show the numbers only.
But when i choose base64 in the icomoon app and then implent it into my files it works on all browsers. But then smoothing will not work in Chrome and Opera.

This is very annoying, when you think you finally got it, it’s ruined in a for ex. Firefox or opera etc. etc.

EDIT:

Finally i figured it out. you will need to make sure that chrome is using SVG (i think it does to smooth the icons) however when i did that the icons in firefox would disappear because (i think) firefox can’t use svg icon fonts.

@font-face {

font-family: 'fontname';

src: url('fonts/fontname.eot');

src: url('fonts/fontname.eot') format('embedded-opentype'),

url('fonts/fontname.svg#fontname') format('svg');

}





/*if mozilla*/

@-moz-document url-prefix() {

@font-face {

font-family: 'fontname';

src: url('fonts/fontname.ttf') format('truetype');

}

}

[Source](http://stackoverflow.com/questions/4060607/font-face-anti-aliasing-on-windows-and-mac/8499228#8499228 ” Chrome Rendering Problem”)

So firefox will use the ttf format and chrome will use the svg format that way the font is smooth on all browsers. Except Opera that one is still not showing the icons.

EDIT2: Make sure you have the following at the end of the svg font: #fontname

url('fonts/fontname.svg#fontname') format('svg'); 

That will make it work in Opera, every icon-font will be smooth on all the browsers

[chrisburton]

SVG’s aren’t suitable for small sizes as they are basically scalable images and not actually a font. And therefore the hinting data is lossed making the fonts render just as poorly on Windows. PostScript fonts can solve the aliasing for display faces. I believe Typekit does this for some fonts in their library. Webtype is manually optimized for a range of font sizes so they generally render really well.

[jpfotoz]

I’m having a similar yet different program. When I view a font I’m using (*Caviar Dreams Regular also from Font Squirrel ) – it renders the same on my PC and Mac in all browsers.. BUT on a co-workers computer, it’s actually bolder. And we’re looking at the same site and url. Any ideas on why it’s different?

[chrisburton]

What’s the difference between their computer and yours?

[jpfotoz]

They should be the same – both are Mac Book Pro’s — same browsers versions being tested. Not sure.. Got any ideas of what to look for?

[chrisburton]

@jpfotoz Link?

[Author]

Posts