The font will not be found on the server for Firefox

advertisements

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


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>