Coding Tips & Tricks


Home > IIS

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.

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

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.








Comments

Paul - 12/9/2013
In IIS8, these are now registered for you. Also I think that the 'most correct' WOFF MIME is font/x-woff. Also be aware of CORS issues, especially if using a CDN. See this post for fixes - http://blog.feedbackhound.com/hosting-web-fonts-in-azure-blob-storage-using-the-new-cors-support

test - 1/8/2014
asdadasdasd asdc

Asad - 8/13/2014
Awsome! nicely fixed. 1

Cole - 11/24/2014
Nicely done! Thanks very much!


Add your comment

300 Characters left


Please fill this in to confirm that you are human