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;
}

what version do you have for firefox and chrome? Gecko 1.9.2 (Firefox 3.6) adds support for WOFF. — Sotiris, Oct 25 '10 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. https://onlinefontconverter.com/ — stacksonstacksonstacks, Aug 29 '16 at 21:09

score 729 · Accepted Answer · edited Oct 07 '21 at 07:34

729

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>

edited Oct 07 '21 at 07:34

Community

1
1

answered Sep 10 '11 at 20:51

Ian Robinson

16,892
8
47
61

Yeah, this works. I always forget to update my production server with the darn mime type. The problem doesn't present itself in IE typically because it will load a .eot file first, if available. In Firefox I get a 404 if this mime type is not in place for .woff. – Corgalore Dec 15 '11 at 17:13
Same happens with IIS7 as well. Thanks for the solution and +1 for including the config file version as well. Cheers! – longda Apr 09 '13 at 22:56
Okay, I take that back... still getting errors. There are two answers here... which is the correct one? x-woff or x-font-woff? Both seem to still error out in chrome. – longda Jun 05 '13 at 20:39
Could I create this `web.config` file next to css files (Don't have access to site's root directory). Would it work? – DummyBeginner Jan 18 '14 at 20:02
Thank you very much. I would like to add that your xml is correct, but the screenshot is not because it should be `x-font-woff` exactly or `font-woff`, but not `x-woff`. – ivkremer Jan 24 '14 at 11:32
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 `` right before you specify the new mimeMap in your web.config file, to remove the false duplicate. – Pete Jan 30 '14 at 17:31
1

Pete's issue bit me before I saw his comment, so I edited the answer to avoid having other people run into the same problem. – StriplingWarrior Feb 26 '14 at 01:01
1

If you're deploying an app via Web Deploy add the MIME type to *Web.config*; apparently the setting is saved in *Web.config* anyways. – Kenny Evitt Feb 28 '14 at 15:12
11

The MIME type has been standardized as [`application/font-woff`](http://www.w3.org/TR/WOFF/#appendix-b). – Fernando Correia Jul 13 '14 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 '15 at 16:11
This is a clean solution and working well but as the @Sunil's answer above you should also include woff2 format to your answer, since both of the format has 404 problem on IIS server. – Cromwell May 03 '17 at 06:05
2

Looks like the specification has changed (again). Your advice for `application/x-font-woff` is now out of date, as of [RFC 8081](https://tools.ietf.org/html/rfc8081#section-4.4.5) the correct mime type is now `font/woff` and `font/woff2`. See the [updated answer](https://stackoverflow.com/a/5142316/542251) in your linked question – Liam Jun 14 '18 at 11:04
3

This solution didn't work for me. What did the trick for me was: https://hotcakescommerce.zendesk.com/hc/en-us/articles/210926903-HTTP-404-Not-Found-Error-with-woff-or-woff2-Font-Files – Kim Lage Dec 26 '18 at 13:23

Sunil · Answer 2 · 2023-08-05T07:41:17.860

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>

edited Aug 05 '23 at 07:41

answered Nov 23 '15 at 16:54

Sunil

20,653
28
112
197

3

and your mentioned tag `` must be inside a `` tag – S.Serpooshan Oct 04 '16 at 08:32
working perfectly fine, reporting from Windows Server 2012 r2, ASP.Net MVC5. – Cromwell May 03 '17 at 06:07

score 44 · Answer 3 · answered Feb 28 '12 at 14:58

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)

answered Feb 28 '12 at 14:58

adriendenat

3,445
1
25
25

Where do you change this? In the browser or on the server? – Jake Wilson Nov 15 '12 at 05:35
As explained in the answer above, it must be o the server. This solution is for Windows Server with IIS 6. – adriendenat Nov 16 '12 at 15:05
1

chrome is still complaining for me with x-font-woff – Sonic Soul Apr 28 '15 at 13:07
To re-iterate [my comment](https://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files/9484251#comment88714435_7374640): Looks like the specification has changed (again). Your advice for `application/x-font-woff` is now out of date, as of [RFC 8081](https://tools.ietf.org/html/rfc8081#section-4.4.5) the correct mime type is now `font/woff` and `font/woff2`. See the [updated answer](https://stackoverflow.com/a/5142316/542251) in your linked question – Liam Jun 15 '18 at 08:28

Dhanuka777 · Answer 4 · 2016-03-31T02:25:10.303

15

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

edited Mar 31 '16 at 02:25

answered Jan 10 '14 at 10:28

Dhanuka777

8,331
7
70
126

2

Note that [link-only answers are discouraged](http://meta.stackoverflow.com/tags/link-only-answers/info), 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 '14 at 10:45
@kleopatra - Updated the answer with details and removed the link. – Dhanuka777 Mar 31 '16 at 02: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 '17 at 11:35

score 10 · Answer 5 · answered Dec 02 '15 at 09:16

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>

score 8 · Answer 6 · edited Jun 20 '20 at 09:12

8

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

File name extension: .woff

MIME type: application/octet-stream

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 11 '14 at 08:39

Thunder

10,366
25
84
114

score 2 · Answer 7 · answered Nov 11 '14 at 15:36

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.

score 1 · Answer 8 · edited Jun 14 '18 at 11:13

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 !

edited Jun 14 '18 at 11:13

Liam

27,717
28
128
190

answered Mar 03 '15 at 13:12

IvanJijon

437
5
17

score 0 · Answer 9 · answered Feb 19 '15 at 11:30

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.

answered Feb 19 '15 at 11:30

Phil McCarty

476
4
7

score 0 · Answer 10 · answered May 09 '17 at 11:05

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.

answered May 09 '17 at 11:05

Thinira

361
3
8

score 0 · Answer 11 · answered Nov 19 '11 at 18:24

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.

answered Nov 19 '11 at 18:24

Ecksley

314
3
9

score 0 · Answer 12 · edited Apr 29 '13 at 16:13

0

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

edited Apr 29 '13 at 16:13

Brian Mains

50,520
35
148
257

answered Mar 29 '12 at 11:03

Dmitriy Romanov

191
1
1
6

score -1 · Answer 13 · answered Jun 05 '15 at 13:33

-1

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

answered Jun 05 '15 at 13:33

dhaworth

57
6

1

Can you please extend your answer and provide detail about how it solves problem. – talex Jun 22 '15 at 16:00
I have now [pointed this out to the accepted answer](https://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files/8196204#comment88714435_7374640). – Liam Jun 14 '18 at 11:16

score -1 · Answer 14 · edited Nov 27 '19 at 05:30

-1

Solved it:

I had to use Mo'Bulletproofer method

edited Nov 27 '19 at 05:30

Christopher Doty

53
5

answered Oct 25 '10 at 15:27

dcp3450

10,959
23
58
110

Does that mean you're not using WOFF anymore? Could it be that your webserver isn't properly configured to serve WOFF files? E.g. see this: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/3627228#3627228 – mercator Oct 25 '10 at 15:45
I tested the font with the encoding with other machines. Displays fine and no 404 error. – dcp3450 Oct 25 '10 at 15:55
It wont let me. The encoding is way to long. It's explained here: http://paulirish.com/2010/font-face-gotchas/ – dcp3450 Oct 25 '10 at 16:04
1

The link in the answer does not exist anymore. – Munim Munna Jul 23 '18 at 11:15

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

14 Answers14

Solution 1

Solution 2

Linked

Related