Fontawesome does not work when served by IIS

StackOverflow https://stackoverflow.com//questions/23007250

Question

FontAwesome does not work for me when I put my app on IIS7 server.

In Firefox the requested URL is encoded to http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3 and I get 404. When I change %3F to ? everything works fine.

Same thing happens in IE, but the request goes to eot font.

This is what I have in CSS (same as on FontAwesome page):

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

I think the problem is that IIS encodes the URLs and instead of requesting ../fonts/fontawesome-webfont.eot? the request goes to ../fonts/fontawesome-webfont.eot%3F.

Please do not suggest removing '?' or '#' from the URLs. They are there on purpose and are essential. The question is how to make IIS not to encode the URLs in that way. Any clues will be appreciated.

Edit: Btw. the above situation takes place when in web.config I set requestValidationMode and requestPathInvalidCharacters:

<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />

Without it I get 400 (Bad request): A potentially dangerous Request.Path value was detected from the client (?)

How can I fix IIS to serve the font properly?

Edit2: OK, I found the cause of the problem. SquishIt bundling tool for MVC3 was changing those characters. When I exclude font-awesome.css from the bundle everything works fine.

Was it helpful?

Solution 4

SquishIt bundling tool for MVC3 was url-encoding the font paths, so ../fonts/fontawesome-webfont.eot? in css file was changed to ../fonts/fontawesome-webfont.eot%3F. This normally returns 400, because %3F is considered unsafe. If you set requestPathInvalidCharacters="" then %3F is considered safe, but there is obviously no file ``../fonts/fontawesome-webfont.eot%3F`, therefore 404.

I removed fontawesome.css from the bundle and everything works fine.

OTHER TIPS

Why is @font-face throwing a 404 error on woff files?

Add the MIME types in the web config:

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>    
  </system.webServer>

You can open IIS, point to your website, In IIS session, select MIME Types. After Mime Types view showing, click Add -> In dialog:

  • File name extension: .woff
  • MiME types: application/x-font-woff

click OK.

Done.

This Answer is not for the above problem But for those who face similar error but due to different reason and land up into this thread.

I faced similar problem but later found that IIS was trying to look for font-awesome woff,eot files in the folder MyIpAddress/fonts/fontawesome-webfont.woof but I had the files in different folder. Moving the fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff into my fonts folder solved my problem

for me only adding the bootstrap CDN link solved the issue

for your page:

<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>

Playing with IIS sever is risky, instead of that I tried another trick which was 100% success.

Step 1

Rename the font files names by adding .jpg at the end of the files.

fontawesome-webfont.eot.jpg (likewise)

Then Change the File types in fontawesome.css font rendering lines

 */@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot.jpg?v=4.0.3'); src:url('../fonts/fontawesome-webfont.eot.jpg?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff.jpg?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf.jpg?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg.jpg?v=4.0.3#fontawesomeregular') format('svg');

If you are using CodeIgniter under IIS7 :

In your web.config file, add woff to the pattern

<rule name="Rewrite CI Index"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /> </conditions> <action type="Rewrite" url="index.php/{R:0}" /> </rule>

Hope it helps !

I changed from woff2 to woff and it went on fine.

If you're adding FontAwesome via bundling, it can throw out the woff2 url. See the following solution on a similar thread where CssRewriteUrlTransform is used to rework the url: https://stackoverflow.com/a/22700610/746984

Use this cdn in your index.html page...

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top