Font-Awesome error 404 on fonts

css fonts font-awesome
Non picture Non · Mar 28, 2015 · Viewed 88.8k times · Source

I do not know what is going on but in the browser console I can see 3 errors related to font-awesome

 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0

I know it is ridiculous I can not figure out this by myself, but everything seems to be OK, in my index.html I have something like this

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

and that's all I have related to the font-awesome thing, I already check the path and I am not wrong with that.

Is this happening with any of you guys ?

enter image description here

UPDATE

this is the NGINX part where I load some content in the headers

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";

Answer

jhoelz picture jhoelz · Nov 3, 2015

Better yet, add this section to your web.config and then those mime types will be automatically added to IIS on any server you deploy to. (The remove is to avoid a duplicate mime type error in case they are already there)

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

Related questions

Font Awesome icon inside text input element

I am trying to insert a user icon inside username input field. I've tried one of the solution from the similar question knowing that background-image property won't work since Font Awesome is a font. The following is my approach and …

Read More
How to vertically align text with icon font?

I have a very basic HTML which mix plain text and icon fonts. The problem is that icons are not exactly rendered at the same height than the text: Any suggestion to fix it?

Read More
font-awesome not working bundleconfig in MVC5

If I direct refer to font-awesome.css in _layouts page. it will work <link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" /> But I used in BundleConfig.cs. Icon is not showing. bundles.Add(new StyleBundle("~/Content/css").…

Read More