Hosting Font Awesome (or Other Web Fonts) in Azure

August 8th 2015 Web Fonts IIS 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.

404 errors for Font Awesome files

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.

Successfully downloaded .woff2 file

Get notified when a new blog post is published (usually every Friday):

If you're looking for online one-on-one mentorship on a related topic, you can find me on Codementor.
If you need a team of experienced software engineers to help you with a project, contact us at Razum.
Copyright
Creative Commons License