Web font in Chrome

Question

I have a webfont that looks amazing on Firefox, not so much on Chrome. I've tried playing with the text-rendering property, with less-than-spectacular results. My CSS is something like this:

@font-face {
    font-family: 'TextFont';
    src: url('[my font file url]') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: TextFont, Tahoma, Geneva, sans-serif;
    text-rendering: auto;
}

Changing text-rendering doesn't seem to do anything in Firefox, so I'm posting a single screenshot for it.

Results:

Firefox (a.k.a. "what it should look like")
Chrome - text-rendering: auto
Chrome - text-rendering: optimizeLegibility
Chrome - text-rendering: optimizeSpeed
Chrome - text-rendering: geometricPrecision

All of the Chrome screenshots look really bad compared to the Firefox one. Is there something I'm missing in the CSS?

I'm using Windows 7, Firefox 8.0, and Chrome 15.0.

Chrome is terrible at rendering fonts on Windows, and it's a more or less unfixable issue (unless Google decides to use ClearType). That's why you should switch to Linux ;) — Blender, Dec 15 '11 at 00:28
I have no problem with switching to Linux, but I need it to look good everywhere — cambraca, Dec 15 '11 at 00:45
I'm being sarcastic about Linux, but I've never had good luck with custom fonts on Chrome. — Blender, Dec 15 '11 at 01:39
You might want to try serving the SVG file first. It isn't for everyone but you might want to try it out. We wrote a blog post about it. You can read it here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome — Fontspring, Aug 06 '12 at 20:39
@Fontspring - thanks for pointing this out - I was so disappointed when the brand font looked so sad in Chrome; serving up the SVG first has made a world of difference. Kudos! — somewhatsapient, Feb 13 '13 at 01:36

Nils · Answer 1 · 2014-05-20T20:59:09.730

3

Not sure if this is what you're seeing, but Chrome has an issue with anti-aliasing and truetype fonts. As per http://www.fontspring.com/blog/smoother-web-font-rendering-chrome, you can instead specify the SVG font before the TrueType in your font-face, e.g.:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); 
src: url('webfont.eot?#iefix') format('embedded-opentype'),
    url('webfont.svg#svgFontName') format('svg'),
    url('webfont.woff') format('woff'),
    url('webfont.ttf')  format('truetype');
}

The biggest downside is that Safari will download both the svg and the woff.

edited May 20 '14 at 20:59

answered Mar 27 '13 at 16:32

Nils

5,612
4
34
37

careful with copy/pasting the above - the quote characters are "single quotes" not apostrophes. (CSS doesn't understand them) – kolosy May 20 '14 at 16:07
1

Yikes! I fixed the apostrophes. Thanks for the note. – Nils May 20 '14 at 20:59

score 2 · Answer 2 · answered Jan 24 '13 at 10:12

2

Try this:

 -webkit-text-stroke: .5px

The .5 is kind of arbitrary - some pixel value between 0 and 1 is the key. This forces sub-pixel hinting of the font.

A demo can be seen here: http://dabblet.com/gist/4154587

answered Jan 24 '13 at 10:12

Barney

16,181
5
62
76

score 1 · Answer 3 · answered Dec 15 '11 at 00:32

This is how I do all of mine and it's worked on IE, Firefox, Chrome

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

}
body{
font: 12px 'NeutraTextBold', sans-serif;
color: #FFF;
}

I get my code from fontsquirrel

not sure why I got a downvote for this, just trying to help with what seems to me a valid answer. If somebody cares to share with me as to why it's downvoted so I know for future reference. — Andres, Apr 12 '13 at 23:42

score 0 · Answer 4 · edited Feb 08 '17 at 14:55

0

Chrome has anounced in Chrome 37 they will be switching from Windows Graphics Device interface to Microsoft’s DirectWrite API, a technology that improves the way fonts look on modern screens.

The Beta is now out: https://www.google.com/chrome/browser/beta.html

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

edited Feb 08 '17 at 14:55

Community

1
1

answered Jul 29 '14 at 10:07

ZZ9

2,177
2
27
38

Brad Dunzer · Accepted Answer · 2011-12-15T18:41:37.680

There really is not anything you can do to improve this via CSS. The text rendering engines are different between Firefox and Chrome and you are seeing the results. If the font is not properly hinted and prepared for a web font you can expect results like this to be enhanced.

Where was the font acquired from?

You can try running it through FontSquirrel to see if any of the automatic hinting that Ethan offers might normalize this a bit.

Some additional information on rendering and DiretWrite which is what you are seeing as the big differentiators....http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Hopefully someday chrome will fix this. Track the bug here: https://code.google.com/p/chromium/issues/detail?id=137692 — djsadinoff, Feb 11 '14 at 10:09

Web font in Chrome

5 Answers5