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

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

User · Answer

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 !

User · Answer

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     Go to IIS root node and double-click the  MIME Types  configuration option    Click  Add  link in the Actions panel on the top right   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

User · Answer

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

User · Answer

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      lt system webServer gt       lt staticContent gt         lt remove fileExtension   woff    gt   lt  -- In case IIS already has this mime type -- gt         lt mimeMap fileExtension   woff  mimeType  font woff    gt       lt  staticContent gt         lt  system webServer gt

User · Answer

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

User · Answer

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

User · Answer

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  lt system webServer gt  tag    lt staticContent gt     lt remove fileExtension   woff    gt     lt  -- In case IIS already has this mime type -- gt     lt mimeMap fileExtension   woff  mimeType  application x-font-woff    gt     lt remove fileExtension   woff2    gt     lt  -- In case IIS already has this mime type -- gt     lt mimeMap fileExtension   woff2  mimeType  application x-font-woff2    gt   lt  staticContent gt

User · Answer

Run IIS Server Manager  run command   inetmgr  Open Mime Types and add following  File name extension    woff MIME type  application octet-stream

User · Answer

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

User · Answer

IIS Mime Type   woff font x-woff  not application x-woff  or application x-font-woff

User · Answer

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

User · Answer

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

User · Answer

Solved it   I had to use Mo Bulletproofer method

User · Answer

In addition to Ian s answer  I had to allow the font extensions in the request filtering module to make it work     lt system webServer gt     lt staticContent gt       lt remove fileExtension   woff    gt       lt remove fileExtension   woff2    gt       lt mimeMap fileExtension   woff  mimeType  application x-font-woff    gt       lt mimeMap fileExtension   woff2  mimeType  application x-font-woff    gt     lt  staticContent gt     lt security gt         lt requestFiltering gt             lt fileExtensions gt                 lt add fileExtension   woff  allowed  true    gt                 lt add fileExtension   ttf  allowed  true    gt                 lt add fileExtension   woff2  allowed  true    gt             lt  fileExtensions gt         lt  requestFiltering gt     lt  security gt       lt  system webServer gt

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

Examples related to css

Examples related to http-status-code-404

Examples related to font-face

Examples related to woff