@font-face for custom fonts, fonts not smooth in Chrome

Question

I have a web application that is using CSS3's @font-face to embed custom fonts. So far this has works perfectly in IE and Firefox.

With Chrome, however, the custom fonts appear pixelated and not smooth. Below is a link to a screen snippet of an example of my font in Firefox & IE (top) and Chrome (bottom): Screenshot comparison

It might be hard to see the difference in such a small sample screenshot, but when this is happening all over the page it is very noticeable.

Below is an example of how I'm using @font-face in my stylesheet:

@font-face 
{
    font-family: 'MyFont';
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
         url('../Content/fonts/MyFont.ttf') format('truetype');
}

Another thing possibly worth mentioning, is that when I pull up the site in ANY browser running on a VM, the fonts are SUPER choppy, much worse than the Chrome example. This is happening when I use any of my school computers, which are all running Win7 VMWare desktops. It also happens when I pull up the site from a Windows 7 VM running on a friend's Mac.

Solution 1

This is a known issue that Chrome devs are fixing:

http://code.google.com/p/chromium/issues/detail?id=137692

To work around until then first try:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

If this does not work for you, this work-around worked for me (above did not fix windows Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

it appears rearranging the @font-face CSS rule to allow svg's to appear 'first' fixes this problem.

example:

-before--------------

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


-after--------------

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

Solution 2

Unfortunately, all browsers render fonts differently. And one that looks ok in one might have trouble in another. It's not that easy to find a good font for font-face... if you want pixel perfection you will have to use images.

But not all is lost, here are 20 free fonts (free for commercial use even!) that render quite nicely (I always end up checking this list): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

Remember that you can't host paid fonts or you would be distributing them and you could end up in trouble.

Solution 3

You may want to play with optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/

And also -webkit-font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing

It might also be worth using font-squirrels font generator to generate your webfonts and css to load in the fonts: http://www.fontsquirrel.com/fontface/generator (though I'm not sure if that will fix your problem or not)

Comments

[Danny]

Unfortunately I have no control over the fonts used. Customer has their own fonts that I must use.

[Yisela]

If the legibility tricks don't work, you will have to explain to your client that not all fonts are safe for web

[GrahamMc]

See @Evan's answer below - worked for me in Chrome 25 for Windows