Why is font-face not working in Firefox?

Question

I'm using a font-face and it's rendering fine in Safari and Chrome but not Firefox.

@font-face {
    font-family: 'franchiseregular';
    src: url('franchise-bold-webfont.eot');
    src: url('franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('franchise-bold-webfont.woff') format('woff'),
         url('franchise-bold-webfont.ttf') format('truetype'),
         url('franchise-bold-webfont.svg#franchiseregular') format('svg');
    font-style: normal;
}

h1 { 
font-family: 'franchiseregular', Helvetica, 'Helvetica Neue', Arial, sans-serif; 
}

Are you viewing it on a local dev environment? Apparently you can run into issues if that is the case: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie — patricksweeney, Jan 26 '13 at 00:44
possible duplicate of [@font-face not work in Firefox](http://stackoverflow.com/questions/14445516/font-face-not-work-in-firefox) — Kate Gregory, Jan 26 '13 at 01:12

score 0 · Answer 1 · answered Mar 05 '14 at 16:16

Firefox tends to use the woff file type. You might need to make sure your web server is set up to serve woff files. You can achieve this at a server level with the mime types, or add the following to your web config.

<system.webServer>
   <staticContent>
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
   </staticContent>
</system.webServer>

Why is font-face not working in Firefox?

1 Answers1