Adding mime types to web.config

In some cases, we need to add mime types in order for the IIS to detect our files. For instance, I needed to add a custom font using CSS3 and so I added it to my stylesheet as follows:

@font-face {font-family: “myCustomFont”; src: url(../fonts/myFont.otf) format(“opentype”);}

When running on my Localhost, the font would appear fine however when upload to IIS the fonts would not show properly.

It also makes a difference depending which IIS one is using.

If running on IIS 6 or older, you will need to configure mime types on the server:

Read Microsite Instructions on configuring mime types for IIS6

If running on IIS 7 or newer, the mime types can be added to the web.config which will allow you to not touch the IIS directly (suggested):

Open the web.config and in the <system.webServer> section which is situated directly within <configuration> tag and add the following mime types to cover it all:

<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
<mimeMap fileExtension=".ogg" mimeType="video/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".spx" mimeType="audio/ogg" />
<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>

Hope that helps 🙂