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

I made a detailed blog post about this incl. fixes: [How to fix the ugly font rendering in Google Chrome](http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/) and this has also been asked here: http://stackoverflow.com/q/11487427/1114320 — Sliq, Aug 30 '13 at 15:30

score 35 · Accepted Answer · answered Dec 16 '12 at 02:25

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

score 3 · Answer 2 · answered May 16 '12 at 21:55

3

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.

answered May 16 '12 at 21:55

Yisela

6,909
5
28
51

Unfortunately I have no control over the fonts used. Customer has their own fonts that I must use. – Danny May 16 '12 at 22:11
If the legibility tricks don't work, you will have to explain to your client that not all fonts are safe for web – Yisela May 16 '12 at 23:08
See @Evan's answer below - worked for me in Chrome 25 for Windows – GrahamMc Mar 30 '13 at 16:48

score 1 · Answer 3 · answered May 16 '12 at 21:58

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)

score 1 · Answer 4 · answered Nov 05 '13 at 21:35

1

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

answered Nov 05 '13 at 21:35

Tires

1,529
16
27

score 0 · Answer 5 · answered Feb 07 '14 at 08:01

0

I would suggest using this:

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

answered Feb 07 '14 at 08:01

Cas Bloem

4,846
2
24
23

score 0 · Answer 6 · answered Mar 27 '14 at 18:58

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.

score 0 · Answer 7 · answered Aug 05 '14 at 16:02

0

This issue will be resolved with Chrome 37.

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

answered Aug 05 '14 at 16:02

moettinger

4,949
2
15
20

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

7 Answers7

Linked