@font-face font stacks suddenly died in firefox

Question

The following CSS has been working for a good week or so, I have skipped back through the GIT repo to see where it breaks and it seems to be broken in all of the commits (leading me to believe I haven't done anything wrong).

Still works in Chrome.

@font-face {
    font-family: 'Blackout2AM';
    src: url('../fonts/Blackout-fontfacekit/Blackout-2am-webfont.eot');
    src: url('../fonts/Blackout-fontfacekit/Blackout-2am-webfont.eot?iefix') format('eot'),
         url('../fonts/Blackout-fontfacekit/Blackout-2am-webfont.woff') format('woff'),
         url('../fonts/Blackout-fontfacekit/Blackout-2am-webfont.ttf') format('truetype'),
         url('../fonts/Blackout-fontfacekit/Blackout-2am-webfont.svg#webfontXyt5a0LX') format('svg');
    font-weight: normal;
    font-style: normal;

}

.sidebar h2, .sidebar h3 a, #footer .menu a, .switcher li a, .dateLinks a{
    font-family: 'Blackout2AM';

}

Do the fonts exist? What does Firebug say about what it's loading? — Pekka, Apr 20 '11 at 14:51
Is it Firefox 4? If so, you might want to drop back to 3.6.16 and see how that goes. — Pete Wilson, Apr 20 '11 at 14:57
The font files seem to be present in the CSS, in firebug. How can I tell if it is actually fetching the files? — Mild Fuzz, Apr 20 '11 at 15:06
Duplicate of [css @font-face not working with firefox, but working with chrome and IE](http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie) — Mild Fuzz, Apr 20 '11 at 15:43

score 1 · Accepted Answer · answered Apr 26 '11 at 10:47

1

Place this in .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

answered Apr 26 '11 at 10:47

Mild Fuzz

29,463
31
100
148

andyb · Answer 2 · 2011-04-20T15:50:56.553

0

I downloaded the font you are using and can (sort of) reproduce the problem.

If you define the @font-face twice, one with broken URLs and one with correct URLs, Firefox4 and Safari5 do not show the font at all but Chrome12 and Firefox3 are fine.

The order of the correct verses broken @font-face rules is also important as Firefox4 and Opera11 will only display the font if the correct rule is the last one. Safari5 will not display the font at all if there is a broken URL, regardless of the order.

Edit: Ah, if it's broken in Firefox 3 also, it might be Firefox Bug 567573

edited Apr 20 '11 at 15:50

answered Apr 20 '11 at 15:45

andyb

43,435
12
121
150

an .htaccess hack from another question fixed it -> see comments. – Mild Fuzz Apr 20 '11 at 15:51
1

Oh **that** problem! Was an interesting investigation for me nonetheless, if only to highlight that browsers are handling the invalid URLs very differently. – andyb Apr 20 '11 at 15:54

@font-face font stacks suddenly died in firefox

2 Answers2