Hosting Font Awesome (or Other Web Fonts) in Azure
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
.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
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
<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
.woff2 files I decided to include
.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.