Font-Awesome error 404 on fonts

CssFontsFont Awesome

Css Problem Overview


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

Css Solutions


Solution 1 - Css

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>

Solution 2 - Css

Add the .woff to your application server mime type(e.g. iis-> mime type) as application/font-woff

Solution 3 - Css

i had the same problem with iis. I added a new mime type with ".woff2" as file extension and "font/x-woff" as mime type and the problem solved.

Solution 4 - Css

1.Go to IIS, find your website, find MIME Type, then click add

2.Put "woff2" at Attached file name Put "application/font-woff" at Mime type

3.Restart your website on IIS

Solution 5 - Css

The URLs you've provided are all invalid and do not link to a resource. As far as any of us will be able to tell from your post - they simply do not exist.

Did you upload your files correctly for the intended folder structure?

Solution 6 - Css

None of the above solutions worked for me except the following one. Please add this line after all 'bundles.Add' commands in your BundleConfig.cs file:

BundleTable.EnableOptimizations = false;

Solution 7 - Css

I was having the exact same issue on a "cPanel shared host server" that only allows for Apache2 webserver. Since wildcards (*) of the value of 'Access-Control-Allow-Origin' are not permitted by the shared host security settings (because: bandwidth & resource thieves) I had to figure out a different way to make it work.

This question asked by the OP infers nginx, but the accepted & most upvoted answers seem to be for IIS. There might be people (like me) who stumble upon this question looking for apache2 solutions related to CORS "permissions" in Apache, so here was the magic bullet for me to solve this issue. I added the following at the tippy-top of my root directory of a WP site in the .htaccess file:

<IfModule mod_headers.c>
 <IfModule mod_rewrite.c>
    SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0
    Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
    Header merge  Vary "Origin"
 </IfModule>
</IfModule>

I wish I could take credit for this fantastic hunk of RegEX magic, but I explain how I derived this solution in this post comment to a similar question here: https://stackoverflow.com/questions/14003332/access-control-allow-origin-wildcard-subdomains-ports-and-protocols/47369604#47369604

>** Obvious NOTE: You need to change the domain name to match your own. You can remove the (|) RegEx OR and just use a single domain name in which ALL subdomains AND the root level domain name are accepted by the RegEx

Solution 8 - Css

Go to: http://fortawesome.github.io/Font-Awesome/get-started/

...use Bootstrap CDN to add Font Awesome into your website with a single line of code. You don't even have to download or install anything!"

Solution 9 - Css

I had the exact same problem and errors. Deleting my Font-Awesome library and installing the most up to date version took care of the issue.

Solution 10 - Css

Add the .woff2 to your application server mime type(e.g. iis-> mime type) as application/font-woff

It worked fine for me.

Enjoy !!!

:)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNonView Question on Stackoverflow
Solution 1 - CssjhoelzView Answer on Stackoverflow
Solution 2 - CssGomesView Answer on Stackoverflow
Solution 3 - CssAngelsGRView Answer on Stackoverflow
Solution 4 - CssChoco LiView Answer on Stackoverflow
Solution 5 - CssxengravityView Answer on Stackoverflow
Solution 6 - CssLuis GouveiaView Answer on Stackoverflow
Solution 7 - CssK8sN0v1c3View Answer on Stackoverflow
Solution 8 - CssMr. William MichaelView Answer on Stackoverflow
Solution 9 - CssdmcdekkerView Answer on Stackoverflow
Solution 10 - CssAnrorathodView Answer on Stackoverflow