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

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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>

Answer 4

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