MVC Cannot locate font files after publishing to IIS

Question

Franework ASP.Net MVC 4

This is another instance of "it worked until I published".

Running my MVC 4 site from Visual studio, everything works great. However, when I publish - font awesome breaks. Looking at the Chrome console, I am seeing this:

GET http://localhost:4321/Content/themes/crisp/font/zocial.woff?94486700 404 (Not Found)

Which is referenced in my CSS like this:

@font-face {
  font-family: 'zocial';
  src: url('/Content/themes/crisp/font/zocial.eot?94486700');
  src: url('/Content/themes/crisp/font/zocial.woff?94486700') format('woff'),
       url('/Content/themes/crisp/font/social.ttf?94486700') format('truetype'),
       url('/Content/themes/crisp/font/zocial.svg?94486700#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

And I have checked - the files are in the site directory:

What am I doing wrong?

Answer 1

I have a feeling you need to add the MIME types to the web.config of your application (or globally in the IIS manager).

Try adding:

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
    </staticContent>
</system.webServer>

to your web.config.

If you run into duplicate key issues that means your IIS instance has some of these extensions already. To allow you to control the MIME type for all the extensions, add:

<remove fileExtension=".woff" />
<remove fileExtension=".eot" />
<remove fileExtension=".svg" />
<remove fileExtension=".ttf" />

before the <mimeMap> elements.