Snippet – Setting MIME Types (Font Awesome or Custom Fonts or Json File Extensions Doesn’t Work When Deployed on Windows)

When using custom fonts on Windows Azure, users have reported issues. For example, Font Awesome icons would not display. Or even if the fonts do display, it might not display correctly on some devices, such as Windows Phones.

In other cases, you may have a file type that does not map to the right MIME type.

In fact, I exposed most of the JSON files with the .txt extension just to avoid the issue of IIS not serving up .JSON files as expected.

It turns out — the issue is that IIS 7 – 8.1 serves up the wrong MIME type for web font files. So you need to be sure the right MIME types are being served up for your font files, as shown here: Proper MIME type for fonts.

When deploying to an IIS servers you need to add MIME support.

Adding MIME Support in Your Visual Studio Project

But when deploying to Azure, you might not have access to IIS (depending on the service you are using).

To set the MIME types you can add the following to web.config:

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

view raw

web.config.xml

hosted with ❤ by GitHub

Important Note: You should only utilize a web.config file to add MIME types that are not IIS defaults. If you use a web.config and redefine a standard MIME type IIS could return a 500 (see: http://blogs.msdn.com/b/chaun/archive/2009/12/04/iis7-error-cannot-add-duplicate-collection-entry-of-type-mimemap-with-unique-key-attribute-fileextension.aspx). As a best practice, you generally only need to set a MIME type if try to deliver a new file type and are receiving a 404. So be sure to test any new file types for delivery and, if required, add a mime type prior to generally publishing any links.