Michal B. Michal B. - 1 year ago 101
CSS Question

Fontawesome does not work when served by IIS

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

In Firefox the requested URL is encoded to

and I get 404. When I change
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
the request goes to

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.

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?

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download