After deploying a site to Azure App Services I noticed a lot of 404 errors while monitoring the request in Application Insights. All of the .woff and .woff2 files returned a 404 error. So it looked like not all of the font files where deployed.
Application Insights 404 errors
But when I checked the fonts folder with the Kudu fil explorer I saw that all the fonts where deployed and I was enabled to download them from Kudu. So it has to be something different.
After some investigation it turns out to be an Azure App Service 'issue'. Azure App service doesn't actually have a MIME type configured out of the box for .woff and .woff2 files, so it will simply return a 404 on every call. We didn't noticed this while developing because your local IIS express service does have MIME types configured for .woff and .woff2 files.
To allow Azure App Service to serve these files we need to update the web.config file. In the <system.webSever> section create a <staticContent> tag. Foreach file extension we want to add create a <mimeMap> entry. This entry has two properties:
- A unique file name extension that is specified by the fileExtension attribute, for example, ".txt", ".png", etc.
- A MIME type for the file name extension that is specified by the mimeType attribute, for example, "text/plain", "image/jpg", etc.
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
After these changes to the Web Config the woff and woff2 files have a configured MIME type and will be served to the client.
