@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 fo

Answer 1

This issue will be resolved with Chrome 37.

http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html

Answer 2

I would suggest using this:

-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;

Answer 3

For me, best worked:

@font-face {
    font-family: MyFont;
    src: url("MyFont.ttf") format('truetype');
}

h1 {
    font-family: MyFont;
    -webkit-text-stroke: 0.5pt;
    -webkit-font-smoothing: antialiased;
}

Answer 4

Try to add -webkit-transform: translateZ(1px); or another 3d transform.

explanation:

Chrome has another bug - blurry text when 3d transforms applied, so adding suggested property will blur chopped text and partially solve the issue. It is still a little bit blurry, but in many cases it is better then chopped one.

example1(issue): chopped text. I've added rotation here to be sure text gets chopped.
example2(solved): semi-smooth text. Applying 3d transform makes text blurry, so chopped text seems more smooth.

The small problem is that looks like we can't target only Windows versions of Chrome in CSS, so we have to use javascript to apply appropriate class.

Answer 5

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

Answer 6

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.