Search code examples
cssfirefoxfont-face

Firefox ignores @font-face generated by FontSquirrel

I have generated a @font-face with FontSquirrel, and resulted these (tweaked later) rules:

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.eot');
}

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.woff') format('woff'),
         local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
         url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Style is applied in the css file like this:

h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }

Everithing works fine in Chrome, even in InternetExplorer, but in newer versions of Firefox, the font doesn't load. It loads in FF 3.6... o_O

I have another font, Ubuntu, loaded from Google via the JavaScript option, and that one loads ok, even on the headings, after changing

font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;

What's wrong with the declarations that makes FF ignore my local font?

EDIT: this is not only on localhost, it happens on the live site too. I have looked at other answers and tried them out, but no luck. WOFF was even base64 encoded, same result.

SOLVED: Seems that the .eot being in a separate declaration (again, FontSquirrel generated) was doing the damage. Moving it with the others solved it. Thanks Boris Zbarsky!

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
         url('cabinsketchro-boldwebfont.woff') format('woff'),
         local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
         url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
Solution

  • Your problem is that you are actually defining two separate faces of the "CabinSketchRoBold" font.

    The first face is normal weight and uses .eot file for the font data.

    The second face is bold weight and uses one of woff, truetype, svg, whichever is available.

    Then you're styling text that's normal weight. So the first face is picked. See http://dev.w3.org/csswg/css3-fonts/#font-style-matching for the spec on this.

    In particular, following the steps in that spec, in step 4 we end up a single face: the .eot one. But since the browser can't do anything with that font format, this face has no glyphs so in step 5 the browser moves on to the next family name. The other (bold) face in the "CabinSketchRoBold" family is not considered, per spec.

    So the upshot is that you should either list font-weight: bold in both your rules or in neither one. Then the .eot and the other options would all be considered as sources for a single font face, not for different faces in the same family.

    It looks like Chrome doesn't actually follow the spec here, unfortunately...