Search code examples
csswebfontstext-rendering

Web font in Chrome

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")

    enter image description here

  • Chrome - text-rendering: auto

    enter image description here

  • Chrome - text-rendering: optimizeLegibility

    enter image description here

  • Chrome - text-rendering: optimizeSpeed

    enter image description here

  • Chrome - text-rendering: geometricPrecision

    enter image description here

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.

Solution

  • 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