Font-Awesome error 404 on fonts

问题:

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 ?

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

回答1:

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

回答2:

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>

回答3:

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.

回答4:

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

回答5:

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?

回答6:

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: Access-Control-Allow-Origin wildcard subdomains, ports and protocols

** 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

回答7:

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

回答8:

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.

回答9:

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

It worked fine for me.

Enjoy !!!

:)

回答10:

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;