Font-Awesome error 404 in fonts

Question

I don’t know what is happening, but in the browser console I 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 this is funny, I can’t figure it out 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 everything that I connected with the font is an amazing thing, I’m already checking the path, and I’m not mistaken.

Is this happening to any of you guys?

UPDATE

this is part of NGINX 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 1

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

Answer 2

Better yet, add this section to your web.config, and then these mime types will be automatically added to IIS on any server on which you are deploying. (Delete - avoid duplication errors of the mime type if they already exist)

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

Answer 3

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

Answer 4

The URLs you provided are invalid and do not reference the resource. As far as we know from your post, they simply do not exist.

Have you downloaded the files for the intended folder structure correctly?

Answer 5

1. Go to IIS, find your site, find the MIME type, then click add

2. Click "woff2" in the Attached file name file. Put "application / font-woff" in the Mime type

3.Let your website in IIS

Answer 6

I had the same problem on a "cPanel shared host server" which only the Apache2 web server allows. Since the wildcard characters (*) of the Access-Control-Allow-Origin value are not allowed by the shared host's security settings (because: bandwidth and resource thieves), I had to figure out another way to make it work.

This question asked by OP indicates nginx, but the accepted and most answer answers seem to be for IIS. There may be people (like me) who stumble on this question looking for apache2 solutions related to the "CORS" rights in Apache, so for me it was a magic bullet. I added the following at the top of my WP site root directory in a .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 would like to take credit for this fantastic piece of RegEX magic, but I explain how I got this solution in this post to answer a similar question: Access-Control-Allow -Original subdomains, ports and protocols

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

Answer 7

Follow the link: http://fortawesome.imtqy.com/Font-Awesome/get-started/

... use Bootstrap CDN to add an Awesome font to your site with a single line of code. You don’t even need to download or install anything! "

Answer 8

I had the same problem and errors. Removing this Font-Awesome library and installing the latest version took care of this problem.