When you deploy an app to Azure app service (Web App), you may notice that the custom font isn’t showing up or some specific files is getting 404 even if they exist on the right place.
This is because of the missing Mime type definitions.
Mime Types
Its definition is,
A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.
And if you want to know why it is causing the 404, read this article.
Missing Mime Types
Font Files
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />Json
<mimeMap fileExtension=".json" mimeType="application/json" />SVG
<remove fileExtension=".svg"/>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />More
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
<mimeMap fileExtension=".webp" mimeType="image/webp" /> <!-- Not all browser supports webp />Sample web.config file
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension="woff"/>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<remove fileExtension="woff2"/>
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
<remove fileExtension=".json"/>
<mimeMap fileExtension=".json" mimeType="application/json" />
<remove fileExtension=".svg"/>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
</system.webServer>
</configuration>Curious about remove fileExtension ?
MimeMap collection inherits but it won’t allow duplicate entries. If a duplicate mimeMap definition is added, it will result,
IIS7 Error: cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’
So for the safe side, we are removing the global definition for that extension before changing it.
