CODEWITHSUNDEEP
c#cssasp.net-mvcasp.net-mvc-4
drewwyatt
drewwyatt

Reputation: 6027

MVC Cannot locate font files after publishing to IIS

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:

enter image description here

What am I doing wrong?

Upvotes: 3

Views: 4217

Answers (1)

Steven V
Steven V

Reputation: 16595

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.

Upvotes: 11

Related Questions