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.

Yes the MIME types are set. This is the only thing that people mention all the time. The font is served when the correct URL is provided (? instead of %3F) — Michal B., Apr 11 '14 at 08:42
If you've found the solution, then answer your own question as it will potentially serve as a resource for others in the future. — nickhar, Apr 12 '14 at 01:17
possible duplicate of [Why is @font-face throwing a 404 error on woff files?](http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files) — Brad, Apr 13 '14 at 23:35

score 21 · Answer 1 · edited May 23 '17 at 12:10

21

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>

edited May 23 '17 at 12:10

Community

1
1

answered Apr 13 '14 at 23:34

Brad

15,361
6
36
57

score 7 · Answer 2 · answered Aug 22 '14 at 03:15

7

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.

answered Aug 22 '14 at 03:15

Stiger

1,189
2
14
29

score 5 · Answer 3 · answered Oct 17 '14 at 07:46

5

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

answered Oct 17 '14 at 07:46

Rajshekar Reddy

18,647
3
40
59

This worked for me. I had font-awesome in a nested path. it seems that it expects to be in /html-root/font-awesome/ – fragmint Feb 16 '16 at 20:48
This worked for me. I've moved fonts folder into my root directory of Visual Studio Project – EduardoUstarez Jul 28 '18 at 19:59

Michal B. · Accepted Answer · 2014-06-19T11:53:14.157

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.

score 3 · Answer 5 · answered Oct 23 '14 at 12:58

3

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>

answered Oct 23 '14 at 12:58

Alexander Khorunzhiy

31
3

score 2 · Answer 6 · answered May 07 '14 at 05:43

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');

Configuring IIS to do what it should is not risky, it's common sense... Whereas serving fonts as jpg is very unintuitive and will create problems e.g. when you later on decide to update Font Awesome. — StackExchange saddens dancek, Feb 12 '15 at 07:52

score 1 · Answer 7 · answered Mar 03 '15 at 13:07

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 !

score 0 · Answer 8 · answered Sep 21 '16 at 11:00

0

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

answered Sep 21 '16 at 11:00

Gregory Way

1

score 0 · Answer 9 · answered Feb 18 '19 at 12:12

0

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

answered Feb 18 '19 at 12:12

Savage

2,296
2
30
40

score -1 · Answer 10 · edited Jan 07 '19 at 09:28

-1

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">

edited Jan 07 '19 at 09:28

bummi

27,123
14
62
101

answered Jan 07 '19 at 09:27

Nag Akkena

11

I'm not sure why the downvotes for this answer, but it actually solved my problem. My host would not let me use a key. – Overlord Jan 26 '19 at 06:22

Fontawesome does not work when served by IIS

10 Answers10

Linked