Home » ASP » ASP.MVC » Azure Website 404 woff, otf and ttf Fonts

Azure Website 404 woff, otf and ttf Fonts

Website that use custom fonts in .woff, woff2, .otf or .ttf can works fine on your local IIS and not working at all on Azure. You can have a 404 response or the following message.

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Azure doesn’t have a mime type associated for .woff, woff2, .otf or .ttf and it requires to setup those mime types.

Fortunately, this is simple to do and can be done directly in the web.config.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
    </staticContent>
  </system.webServer>
</configuration>

The mimeMap‘s element needs to be added for each font type. The mimeMap goes under configuration > system.WebServer > staticContent.

If you publish to Azure, your font should be render correctly. However, maybe in your local IIS you have no more any static resource loading. No more CSS, no more JavaScript! This is because your IIS may already have the .otf and .ttf font defined, whence having them defined twice creates an error. To resolve that issue, remove the mimemap for these fonts.

    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
      <remove fileExtension =".otf"/>
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <remove fileExtension =".ttf"/>
      <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
    </staticContent>

Removing the font and adding this one right after it make sure that it works locally and on Azure.

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon. I also wrote a TypeScript book called Holistic TypeScript

3 Responses so far.

  1. […] Azure Website 404 woff, otf and ttf Fonts […]

  2. glibk says:

    Thank you very much, worked for me!

  3. El Nerto says:

    Thank you very much, worked for me too!

    Master! <3

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.