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

I was experiencing this same symptom - 404 on woff files in Chrome - and was running an application on a Windows Server with IIS 6.

If you are in the same situation you can fix it by doing the following:

Solution 1

"Simply add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties): .woff application/x-woff"

Update: according to MIME Types for woff fonts and Grsmto the actual MIME type is application/x-font-woff (for Chrome at least). x-woff will fix Chrome 404s, x-font-woff will fix Chrome warnings.

As of 2017: Woff fonts have now been standardised as part of the RFC8081 specification to the mime type font/woff and font/woff2.

Thanks to Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Solution 2

You can also add the MIME types in the web config:

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

The answer to this post was very helpful and a big time saver. However, I found that when using FontAwesome 4.50, I had to add an additional configuration for woff2 type of extension also as shown below else requests for woff2 type was giving a 404 error in Chrome's Developer Tools under Console> Errors.

According to the comment by S.Serp, the below configuration should be put within <system.webServer> tag.

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

Actually the @Ian Robinson answer works well but Chrome will continue complain with that message : "Resource interpreted as Font but transferred with MIME type application/x-woff"

If you get that, you can change from

application/x-woff

to

application/x-font-woff

and you will not have any Chrome console errors anymore !

(tested on Chrome 17)

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