40

I'm getting this error message whenever I load my application page. I'm using Apache. Following is my css code.

url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff')

Firefox throws

"NetworkError: 404 Not Found url.../fonts/fontawesome-webfont.woff?v=4.0.3

While chrome says

GET url.../fonts/fontawesome-webfont.woff?v=4.0.3 404 (Not Found)

Can anyone tell me how to fix this problem? Thanks in advance.

5
  • we would have to know your directory structure. Where is the parent file loading the .woff file? 404 simply means the file your are are pointing to doens't exist or "file not found" Commented Jun 8, 2014 at 9:28
  • The font is in same folder as the others font (.ttf, .svg) and they are working fine. And css link is also same as the other fonts. url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    – Zeshan
    Commented Jun 8, 2014 at 9:35
  • in that case, could there be a typo in the url? a capital letter there there should not bet, etc? Commented Jun 8, 2014 at 9:36
  • I double checked the URL, there is nothing wrong in it. Here is my directory structure. approot(assets/fonts/fontfiles, assets/css/cssfiles) I'm using relative URL in css files to point to the fonts files.
    – Zeshan
    Commented Jun 8, 2014 at 9:46
  • 1
    Also on localhost, it works fine but on live it is throwing this 404 error.
    – Zeshan
    Commented Jun 8, 2014 at 9:48

8 Answers 8

86

This worked for me: Add the following lines to your web.config

<system.webServer>
 <staticContent>
   <remove fileExtension=".woff"/>
   <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
 </staticContent>
</system.webServer>

You have to add these lines because by default Apache is not configured with .woff as a default MIME-type. Apache default MIME-type This holds for IIS as well. As Seb Duggan explains here:IIS default MIME, by default .woff files will not be served by the server.

1
  • What I should be doing for tomcat?
    – Jerry
    Commented Jun 25, 2018 at 12:14
17

I've updated mime-types in my IIS web server and that resolves my problem.

Extention > .ttf    MimeType > application/x-font-ttf
Extention > .woff   MimeType > application/x-font-woff
Extention > .woff2  MimeType > application/x-font-woff2

I don't need to change anything in web.config. However, IIS will eventually updates web.config.

1
  • 1
    Perfect answer! Thanks Commented Sep 29, 2018 at 15:15
7

I solve it also using adding the file type under handlers on your web.config for any application .net, angular etc you can set a web.config on IIS

     <handlers>
     <add name="fonts" path="*.woff" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     <add name="fonts2" path="*.woff2" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     </handlers>
1
  • Configuration -> SystemWebServer -> Handlers
    – curiousBoy
    Commented May 27, 2018 at 0:04
6

Add "src:" before url, example:-

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');    
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype');    
  src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');    
  src: url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');    
  src: url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');    
  src: url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');    
  font-weight: normal;    
  font-style: normal;
}
2
  • This is the only solution with teak worked for us. We have website under a folder. “myweb.com/mysite”. The error we are getting “GET myweb.com/mysite/Areas/Mechanical/Content/fonts/… net::ERR_ABORTED 404 (Not Found)”. We add the “mysite” folder to font-awesome.min.css fontface as “src: url('../mysite/fonts/fontawesome-webfont.eot?v=4.7.0');“
    – Kagan Agun
    Commented Dec 19, 2018 at 22:13
  • This method works, when using your regular Webhosting on Apache. Commented Jun 18, 2021 at 4:40
3

I don't know why the accepted answer did not work for me, But I copied the following configuration to make it work :

<system.webServer>
<staticContent>
  <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
2

If you use IIS 6, you can solve your problem by adding Mime to IIS:

enter image description here

1

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

0

If none of the solutions above works for you try this solution specified is one of the stackoverflow pages that to set false to BundleTable.EnableOptimizations in BundleConfig.cs file in the App_Start folder.

BundleTable.EnableOptimizations = false;

However, you will lose the benefits of the bundling which reduces the number of http request from your browser.

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.