Hosting Font Awesome (or Other Web Fonts) in Azure
I recently deployed my new web site to an Azure web app for the first time. The site seemed to load correctly, but a closer inspection with Fiddler revealed a couple of 404 errors.
Font Awesome web font files appeared to be missing, although they were present on the web server. The reason was that by default files with .woff2 and .woff extensions are not served. When web server logging and detailed error messages are enabled for the web app, this becomes obvious from the error log in LogFiles/DetailedErrors:
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
Since you don't have access to IIS Manager for an Azure web app, this needs to be done by adding the following lines to web.config:
<system.webServer>
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
Even though I only encountered errors with .woff and .woff2 files I decided to include .svg and .eot files in the configuration as well. Different versions of different browsers retrieve web fonts in different order; e.g. when I tried it with Chrome 4, it attempted to download the .svg font first.
As soon as I deployed the new web.config file to the server, the error was gone.
