Search code examples
cssfirefoxfont-face

Webfont looks horrible in Firefox

I'm working on getting Museo Slab 500 font to display similar across all browsers.

The only browser where I can not get the font to work properly is Firefox. In fact, the font looks horrible. Especially notice the "w".

Example: enter image description here

What I did: Downloaded font from: myfonts.com and generated webfont at: fontsquirrel.com

OS: Widows 8

Firefox version: 21.0

CSS:

@font-face {  
    font-family: 'museo_slab500';

    src: url('../font/exljbris_-_museoslab-500-webfont.eot');

    src:url('../font/exljbris_-_museoslab-500-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/exljbris_-_museoslab-500-webfont.svg#museo_slab500') format('svg'),
    url('../font/exljbris_-_museoslab-500-webfont.woff') format('woff'),
    url('../font/exljbris_-_museoslab-500-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    @font-face {
        font-family: 'museo_slab500';
        src: url('../font/exljbris_-_museoslab-500-webfont.svg#museo_slab500') format('svg');

        font-weight: normal;
        font-style: normal;

    }
}

What can I do? Am I doing something wrong?

Solution

  • See https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering And try differents value of text-rendering. Maybe nothing will change, but sometimes it helps.

    Have you tried on another computer ? Because the text rendering can change between differents computers and/or OS.