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

font-face font-awesome
Zeshan picture Zeshan · Jun 8, 2014 · Viewed 59.2k times · Source

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

HowieH picture HowieH · Jun 18, 2014

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.

Related questions

How to know if a font (@font-face) has already been loaded?

I'm using Font-Awesome, but while the font files are not loaded, the icons appear with . So, I want these icons to have display:none while files are not loaded. @font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url(…

Read More
Using Font Awesome library in a Shopify store

I'm trying to use Font Awesome: http://fortawesome.github.com/Font-Awesome/ I've used these font icons on several Rails projects with no problem but for some reason when I try to use them in a Shopify store they don't get …

Read More
How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More