Firefox CSS @font-face quirks

Question

So I have an @font-face setup that works in everything but firefox - a common occurance according to google.

Here's the quircky bit. If I set the font-weight to bold (in firebug) it will work, if I set it back to normal it will return.

If I edit the font-face in firebug it will work instantly - even if I put it back to what it was in the first place.

eg:

@font-face {
    font-family: PlayBold;
    src: url(Play-Bold-webfont.eot);
    src: url(Play-Bold-webfont.eot?#iefix) format('embedded-opentype'),
         url(Play-Bold-webfont.woff) format('woff'),
         url(Play-Bold-webfont.ttf) format('truetype'),
         url(Play-Bold-webfont.svg#PlayBold) format('svg');

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

#testtext {
    font-family: PlayBold;
}

Result: Not using the font.

Go into firebug and change anything in the font-face (even just replacing a character with the same character it used to have) and it starts working again.

Why doesn't firefox load the font-face properly in the first place?

Chromium 28, firefox 22.

Answer 1

When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading. As each web font finishes downloading, Gecko updates the text that uses that font. This allows the user to read the text on the page more quickly.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

THINGS TO TRY:

• shuffling the font formats around, possibly putting the TTF or WOFF first
• removing "font-variant: normal;" from the "@font-face" declaration because it doesn't belong there
• properly quote the uri's in your css url(file.ttf) -> url('file.ttf')

• ~last resort~ use a data uri generator and embed the fonts into the CSS

  src: url('data:application/octet-stream;base64,BLAHBLAHBLAH==') format('embedded-opentype'),