Font won't get found on server for firefox

Question

I recently started using FontAwesome and everything works perfectly on the localhost in firefox, IE and Chrome. But when I published my MVC website I got this error in firebug:

Error:

"NetworkError: 404 Not Found - xxxx://test.webapp.ilvo/fonts/fontawesome-webfont.woff?v=4.2.0"fontawe...v=4.2.0

"NetworkError: 404 Not Found - xxxx://test.webapp.ilvo/fonts/fontawesome-webfont.ttf?v=4.2.0"

My font declaration in CSS (normal):

@font-face {
  font-family: 'FontAwesome';
  src: url('/Content/fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('/Content/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')   format('embedded-opentype'),
   url('/Content/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
   url('/Content/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
   url('/Content/fonts/fontawesome-  webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Font declaration in CSS (Mo’ Bulletproofer method)

@font-face {
 font-family: 'FontAwesome';
  src: url(http://:/) format("No-IE-404"), url(/Content/fonts/fontawesome-webfont.eot);
  src: url(http://:/) format("No-IE-404"), url(/Content/fonts/fontawesome-webfont.eot) format("embedded-opentype"),
     url(http://:/) format("No-IE-404"), url(/Content/fonts/fontawesome-webfont.woff) format("woff"),
     url(http://:/) format("No-IE-404"), url(/Content/fonts/fontawesome-webfont.ttf) format("truetype"),
     url(http://:/) format("No-IE-404"), url(/Content/fonts/fontawesome-webfont.svg) format("svg");
  font-weight: normal;
  font-style: normal;
}

Both of these work local! My font is stored in the map Content/fonts. I have 2 other custom fonts which work everywhere but FontAwesome is bugging for some reason.

Need help! Thx

* EDIT

Surfing to xxx://test.webapp.ilvo/Content/fonts/fontawesome-webfont.woff gets me the font.

** EDIT

I tried setting mimeTypes on the server and in my webconfig but both make no difference.

Web.config

<httpProtocol> // FONTAWESOME WOFF & TTT NOT FOUND IN FIREFOX
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

<staticContent>
  <remove fileExtension=".eot" />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />
  <remove fileExtension=".svg" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
  <remove fileExtension=".otf" />
  <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" />
</staticContent>

Putting this in my web config does nothing.

Respond header:

Access-Control-Allow-Head... content-type

Access-Control-Allow-Orig... *

Yep, I don't understand. He is looking in the wrong location for these 2 fonts? I can surf to xxxx://test.webapp.ilvo/Content/fonts/fontawesome-webfont.woff and download the font — Nanou Ponette, Jan 27 '15 at 11:41
Please post the EXACT error message and update the question with that, also with the change I suggested. — DavidG, Jan 27 '15 at 11:42
Does this help: http://stackoverflow.com/questions/15521130/google-warning-resource-interpreted-as-font-but-transferred-with-mime-type-appl/15522254#15522254 — 97ldave, Feb 02 '15 at 10:39
Firefox has a problem with cross-domain policy, I know you have tried adding a custom header in your web.config already, maybe have a look here: http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/ — 97ldave, Feb 02 '15 at 10:52
I have but when I tried ur example, with fontsquirrel. It does not work anywhere. — Nanou Ponette, Feb 02 '15 at 12:26
I understand that you tried all but can you take a look here in issues of fontawesome. I also see that they have closed the issues but still since nothing is working, I think this will give some hints for more approaches. https://github.com/cdnjs/cdnjs/issues/755 — Lalit Kale, Feb 03 '15 at 03:16
I've answered this issue in a similar post http://stackoverflow.com/questions/18650891/woff-font-mime-type-on-live-server-error/19042976#19042976 — Guy, Feb 08 '15 at 00:43

score 0 · Answer 1 · answered Feb 02 '15 at 13:26

0

You should try this. This is working for me. the only change from your code is, it should be x-font-woff not font-woff.

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

answered Feb 02 '15 at 13:26

mitesh

136
5

I don't understand why it is not working. This changes does not help :( – Nanou Ponette Feb 02 '15 at 13:32
@mitesh this actually changed to be "application/x-font-woff" - see my answer here: http://stackoverflow.com/questions/15521130/google-warning-resource-interpreted-as-font-but-transferred-with-mime-type-appl/15522254#15522254 – 97ldave Feb 02 '15 at 13:41
@NanouPonette also try with application/x-woff or application/octet-stream and see the result. – mitesh Feb 02 '15 at 14:01
@mitesh Nope, nothing. I still get a error on loading the.woff and .ttf font. – Nanou Ponette Feb 02 '15 at 14:10
@NanouPonette Try one more thing, not sure if it will work. Use font awesome css file from this URL. maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css – mitesh Feb 02 '15 at 14:37
Is it possible for you to share the URL of your page on which fonts are not loading? and do you have access to IIS? – mitesh Feb 02 '15 at 14:46
That will be difficult because its a intranet application. Yes I can access the IIS server. – Nanou Ponette Feb 02 '15 at 14:57
Look at this link [http://stackoverflow.com/a/23509636/3868293](http://stackoverflow.com/a/23509636/3868293) – mitesh Feb 02 '15 at 15:14
Hmm tried it but no luck again. I tried about everything :/ – Nanou Ponette Feb 02 '15 at 15:54

score 0 · Answer 2 · answered Feb 07 '15 at 21:31

0

What i clearly can see its the mismatch of the url nothing wrong with fonts just check the URL

xxxx://test.webapp.ilvo/fonts/fontawesome-webfont.woff?

and your original url is with /Content/fonts/fontawesome-webfont.woff?v=4.2.0'

so you need to set

      test.webapp.ilvo/Content/fonts/fontawesome-webfont.woff?

then it will work

answered Feb 07 '15 at 21:31

Nadeemmnn Mohd

713
5
14

I have no idea what you mean? – Nanou Ponette Feb 09 '15 at 07:58
What he he probably means is go to the font-awesome.min.css file and change the src:url(/content/fonts/fontawesome-webfont.eot?v=4.2.0) to src:url(../fonts/fontawesome-webfont.eot?v=4.2.0) that worked for me. – Geovani Martinez Feb 24 '16 at 20:30

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

I provided an answer for a similar issue in this post woff font MIME type on live server error

The font mime type should be application/font-woff not application/x-font-woff

edited May 23 '17 at 12:22

Community

1
1

answered Feb 08 '15 at 00:47

Guy

2,883
1
32
39

Looking at your problem, It's not a MIME type issue. Remove "/Content" from your css file to become @font-face { font-family: 'FontAwesome'; src: url('/fonts/fontawesome-webfont.eot?v=4.2.0'); src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('/fonts/fontawesome- webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } – Guy Apr 15 '15 at 03:20

score 0 · Answer 4 · answered May 02 '18 at 02:11

The question has asked 3 year, But for me no answer true. I has been researched and known how to fixed.

Open your file: .csproj and add all font you want to display. Publish again. It'll Ok.

<Content Include="fonts\fontawesome-webfont.eot" />
<Content Include="fonts\fontawesome-webfont.ttf" />
<Content Include="fonts\fontawesome-webfont.woff" />
<Content Include="fonts\FontAwesome.otf" />

Font won't get found on server for firefox

4 Answers4