Question

The fonts used to work, today they stopped working w/o any CSS changes. I can see from firebug net panel that the .woff gets downloaded (oddly twice, first DL is just a circle rolling forever and doesn’t complete). Tested on FF9/10. Here’s my CSS:

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

}

a.css3button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    ..
    font-family: "bebasNeueRegular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    ..
}

I got it from: http://dev.florianweber.me/bf3buttons/# — where it does work in my Firefox. What could be causing conflicts?

Answer 1

We had our CDN domain serving the .css file — which I guess Firefox disliked. I set the hard path to the font files in to the .css and it seems to be working now. 🙂

font-family: 'BebasNeueRegular';
src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot');
src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.woff') format('woff'),
     url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.ttf') format('truetype'),
     url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;

Another way:

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