Why is @font-face throwing a 404 error on woff fil

Question

I'm using @font-face on my company's site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .woff file. IE does not throw the error. I have the fonts located at the root but I've tried with the fonts in the css folder and even giving the entire url for the font. If remove those fonts from my css file I don't get a 404 so I know it's not a syntax error.

Also, I used fontsquirrels tool to create the @font-face fonts and code:

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 1

Solution for IIS7

I also came across the same issue. I think doing this configuration from the server level would be better since it applies for all the websites.

1. Go to IIS root node and double-click the "MIME Types" configuration option

2. Click "Add" link in the Actions panel on the top right.

3. This will bring up a dialog. Add .woff file extension and specify "application/x-font-woff" as the corresponding MIME type.

Add MIME Type for .woff file name extension

Here is what I did to solve the issue in IIS 7

Answer 2

If still not works after adding MIME types, please check whether "Anonymous Authentication" is enable in Authentication section in the site and make sure to select "Application pool identity" as per the given screen shot.