Fontawesome does not work when served by IIS

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.

Answer 1

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>