Font-Awesome error 404 on fonts

Question

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

Did you upload the fonts on your server? – Vucko Mar 28 '15 at 00:08 — Vucko, Mar 28 '15 at 00:08

jhoelz · Answer 1 · 2015-11-05T16:08:55.790

151

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>

edited Nov 05 '15 at 16:08

answered Nov 03 '15 at 20:52

jhoelz

1,521
1
9
5

1

If the file was not mapped with mime type then in console was visible message about missing file. After adding definition of file extension and mime type fontawesome woff2 loads correctly. Thanks. – Marek Bar Nov 04 '15 at 09:04
2

This is definitely the most practical solution for folks running .NET web apps. – DVK May 01 '17 at 18:07
1

@jhoelz This is by far the best of the best answer for THE WEB DEVELOPER who normally doesn't have direct access to the web server! Thank you very much indeed. – dpant Jun 07 '18 at 09:58
I was with this problem after publish on Azure. Your solution worked like a charm. Thank you very much. – gregoryp Jul 13 '18 at 11:27
This is also work for guys who uses Azure App Services to deploy their front-end apps. For instance, for Angular put `web.config` file under /src folder, then adjust angular.json/angular-cli.json to add `"src/web.config"` into array of assets. After that simply deploy everything to Azure as usual. Such .woff/woff2 errors are gone. – hastrb Apr 15 '19 at 15:39

score 81 · Accepted Answer · answered May 29 '15 at 17:35

81

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

answered May 29 '15 at 17:35

Gomes

3,330
25
17

6

I had to do two entries, one for woff and one for woff2. Worked like a charm. Thanks! – Gaʀʀʏ Feb 10 '16 at 17:26

score 9 · Answer 3 · answered Aug 19 '15 at 10:22

9

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.

answered Aug 19 '15 at 10:22

AngelsGR

101
1
3

score 6 · Answer 4 · answered Jan 26 '17 at 05:17

6

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

answered Jan 26 '17 at 05:17

Choco Li

139
2
5

xengravity · Answer 5 · 2015-03-28T00:13:00.093

3

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?

edited Mar 28 '15 at 00:13

answered Mar 28 '15 at 00:08

xengravity

3,501
18
27

everything was ok until I decide to add ```Content-Security-Policy```, see my UPDATE on the question please. And which links do you talk about ? – Non Mar 28 '15 at 00:12
if you say this links ```//www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 ``` of course they work, this ```www.desktop.just4bettors.mobi``` is the page where I am working on right no, but is no getting those links for the font-awesome part. – Non Mar 28 '15 at 00:14
www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 and www.desktop.just4bettors.mobi/bower_components/font-awesome/css/font-awesome.css both go to a 404 Not Found. – xengravity Mar 28 '15 at 00:16
those links are local, just4bettors is the domain where I am working on. – Non Mar 28 '15 at 00:17
The error log doesn't appear to be grabbing the links locally, rather it looks like it is trying to get it from the server. – xengravity Mar 28 '15 at 00:18
and how can I load that from the server ? – Non Mar 28 '15 at 00:18
You need to manually upload it yourself or you can try the Font Awesome CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css – xengravity Mar 28 '15 at 00:21
For future reference the latest version of the Font Awesome CDN can always be grabbed from http://fortawesome.github.io/Font-Awesome/get-started/ – xengravity Mar 28 '15 at 00:22
I have font-awesome in my project already, I have it with bower_components, and I calling it from index.html `````` – Non Mar 28 '15 at 00:22
3

My suggestion is to try the CDN real quick to see if that resolves the issue. It seems you are referencing it incorrectly locally so if you can reference the CDN and it works, you know the file you have locally is in the wrong place. – xengravity Mar 28 '15 at 00:23

score 2 · Answer 6 · answered Mar 09 '18 at 13:06

2

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;

answered Mar 09 '18 at 13:06

Luis Gouveia

8,334
9
46
68

1

This is a weird solution to remove woff mime errors.. you turned off bundle optimization. – hastrb Apr 15 '19 at 15:40
I agree with you @hastrb, it is weird. – Luis Gouveia Apr 17 '19 at 09:25

score 1 · Answer 7 · edited Nov 19 '17 at 01:48

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

score 0 · Answer 8 · answered Aug 20 '17 at 16:29

0

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.

answered Aug 20 '17 at 16:29

dmcdekker

25
7

score -1 · Answer 9 · answered Nov 03 '15 at 03:43

-1

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

answered Nov 03 '15 at 03:43

Mr. William Michael

1

1

Add explanation also with the link that you have shared – Sourabh Kumar Sharma Nov 03 '15 at 03:52
7

CDN's are usually only good for scaffolding and testing stuff out. When deploying to a production environment, it's better to have the files on the webserver OR have a CDN of your own. – Nickvda Jan 26 '16 at 09:54
Also may not be a good idea if you're building intranet applications. – kosherjellyfish Feb 17 '20 at 07:57
I don't think that a good solution is telling someone to use something else. – Narshe Nov 23 '22 at 10:38

score -1 · Answer 10 · answered Jan 30 '18 at 07:58

-1

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

It worked fine for me.

Enjoy !!!

:)

answered Jan 30 '18 at 07:58

Anrorathod

9
4

this is all that was needed for me, more info on mimetype to use here - https://stackoverflow.com/questions/28235550/proper-mime-type-for-woff2-fonts – Poat Mar 22 '22 at 17:14

Font-Awesome error 404 on fonts

10 Answers10

Linked