427

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;
}
2
  • what version do you have for firefox and chrome? Gecko 1.9.2 (Firefox 3.6) adds support for WOFF.
    – Sotiris
    Oct 25, 2010 at 15:03
  • Try converting into the OTF into Woff again. I had a similar issue and the file parsing was corrupt. This is a good site to convert into different types of font. onlinefontconverter.com Aug 29, 2016 at 21:09

14 Answers 14

731

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.

IIS 6 MIME Types

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>
13
  • 5
    Note that you may get an error Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’... due to a conflict with the applicationhost.config file. You can fix this by adding <remove fileExtension=".woff" /> right before you specify the new mimeMap in your web.config file, to remove the false duplicate.
    – Pete
    Jan 30, 2014 at 17:31
  • 11
    The MIME type has been standardized as application/font-woff. Jul 13, 2014 at 17:42
  • 5
    This did the trick! If you have the same issue but with .woff2 file just add another MIME type (or config) with that extension
    – mapache
    Feb 12, 2015 at 16:11
  • 2
    Looks like the specification has changed (again). Your advice for application/x-font-woff is now out of date, as of RFC 8081 the correct mime type is now font/woff and font/woff2. See the updated answer in your linked question
    – Liam
    Jun 14, 2018 at 11:04
  • 3
    This solution didn't work for me. What did the trick for me was: hotcakescommerce.zendesk.com/hc/en-us/articles/…
    – Kim Lage
    Dec 26, 2018 at 13:23
59

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 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>
2
  • 3
    and your mentioned tag <staticContent> must be inside a <system.webServer> tag Oct 4, 2016 at 8:32
  • working perfectly fine, reporting from Windows Server 2012 r2, ASP.Net MVC5.
    – Cromwell
    May 3, 2017 at 6:07
44

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)

4
  • Where do you change this? In the browser or on the server? Nov 15, 2012 at 5:35
  • As explained in the answer above, it must be o the server. This solution is for Windows Server with IIS 6. Nov 16, 2012 at 15:05
  • 1
    chrome is still complaining for me with x-font-woff
    – Sonic Soul
    Apr 28, 2015 at 13:07
  • To re-iterate my comment: Looks like the specification has changed (again). Your advice for application/x-font-woff is now out of date, as of RFC 8081 the correct mime type is now font/woff and font/woff2. See the updated answer in your linked question
    – Liam
    Jun 15, 2018 at 8:28
16

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

Go to MIME Types

Add MIME Type

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

3
  • 2
    Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.
    – kleopatra
    Jan 10, 2014 at 10:45
  • @kleopatra - Updated the answer with details and removed the link.
    – Dhanuka777
    Mar 31, 2016 at 2:29
  • "I think doing this configuration from the server level would be better since it applies for all the websites." - well, that really depends. If you are dealing with a corporate server, which possibly runs several internal apps, yes, you are right. On the other hand, if you run a public-facing website, which is distributed over several servers, the web.config method wins in terms of "consistency" (i.e. it will be there, you can't forget to configure it on one server).
    – Balázs
    Apr 20, 2017 at 11:35
10

In addition to Ian's answer, I had to allow the font extensions in the request filtering module to make it work.

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>
8

Run IIS Server Manager (run command : inetmgr) Open Mime Types and add following

File name extension: .woff

MIME type: application/octet-stream

2

I tried a ton of things around permissions, mime types, etc, but for me it ended up being that the web.config had removed the Static file handler in IIS, and then explicitly added it back in for directories that would have static files. As soon as I added a location node for my directory and added the handler back, the requests stopped getting 404s.

1

If you are using CodeIgniter under IIS7 :

In your web.config file, add woff to the pattern

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

Hope it helps !

0
0

This might be obvious, but it has tripped me up with 404s a number of times... Make sure the fonts folder permissions are set correctly.

0

Also check your URL rewriter. It may throw 404 if something "weird" was found.

0

If you dont have access to your webserver config, you can also just RENAME the font file so that it ends in svg (but retain the format). Works fine for me in Chrome and Firefox.

0

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.

enter image description here

-1

IIS Mime Type: .woff font/x-woff (not application/x-woff, or application/x-font-woff)

2
-1

Solved it:

I had to use Mo'Bulletproofer method

4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.