Search code examples
cssfontsfont-face

@font-face quality issues

I designed a website in Photoshop and was happy with the outcome so I started coding it. I'm having some trouble with the font rendering however. The font looks horrible in browsers compared to Photoshop. The font rendered smoothly in Opera right from the start however.

After some searching I also managed to make it render smoothly in Chrome and Safari. I fixed it by moving 'svg' to the top inside @font-face in my CSS.

I'm still having trouble with Firefox and Internet Explorer however. Both latest versions I believe.

An image (original): enter image description here The text in blue is the problem.

And the @font-face code:

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

The only solution I've found and tried so far is to rearrange the lines in @font-face. Which as I said solved the issue for some browsers but not Firefox and Internet Explorer.

Solution

  • I think it's ok for the text to be rendered slightly different across the browsers. On different OSs you'll receive even more different rendering (try to check OS X or Ubuntu). And that's ok too. Photoshop is a bad reference here, the browser provides a final look and the browser displays your website to your user.

    Instead, I believe you should correct your syntax, cause it will not work for IE 8-. You are declaring src property with EOT font — that will work, but for IE 6+ only. Then you are redeclaring it, and since you are including more that one format, IE will fail it to load and will back up to the default font.

    Additional reading you might be interested in: