Web font in Chrome

css webfonts text-rendering
cambraca picture cambraca · Dec 15, 2011 · Viewed 10.5k times · Source

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.

Answer

Nils picture Nils · Mar 27, 2013

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.

Related questions

How do I install a custom font on an HTML site

I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug" I have it downloaded locally - is there a simple CSS trick to accomplish …

Read More
Webfont Smoothing and Antialiasing in Firefox and Opera

I have custom-made web fonts used on my site. To style my rendering output, I used the following code: //-webkit-text-stroke-width: .05px; //-webkit-text-stroke-color: white; -webkit-font-smoothing: antialiased; This works fine on Safari and Chrome (edges are sharper and lines are thinner). Is …

Read More
Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS? I've inserted this into my stylesheet: body { background: #fff url(../images/body-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica, sans-serif; } @font-face { font-family: 'GestaReFogular'; src: url('gestareg-webfont.eot'); src: …

Read More