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.

css webfonts text-rendering
Edit
Report