IIS - Resource interpreted as Font but transferred with MIME type application/x-font-woff

If you take a look at websites such as Medium, SquareSpace and Information Architects, it's clear that great typography can really enhance the look of a website. Web fonts are a great way to introduce typography to your website and can be added in a matter of minutes. Adding a web font to your website is a simple process, if you are using a service such as Google Fonts or Typekit, you simply add the CSS reference in your HEAD tag.

I was recently working on a project that required me to use web fonts when I came across an interesting warning in Google Chrome. After adding the CSS reference, the fonts appeared instantly and looked great, however I did notice a warning appear in the Console of Chrome Developer tools.

While this warning clearly wasn't having any negative effect and the fonts were still displaying correctly, there is always something about a warning message in a console that bothers me! After a little research, it turns out that that my IIS server was serving the font with the wrong MIME type. In fact, I hadn't configured the server to handle any MIME types for web fonts.

Fortunately, if you are using IIS and ASP.NET, the fix for this warning message is a simple one. In your Solution Explorer in Visual Studio, navigate to the Web.Config file and add the following lines:

That's it! You might need to restart your website, but the fonts will now be served from the server using the correct MIME types and will display no warning messages.