Getting Fonts to load on Azure App Service (a.k.a. Azure Website )

on


When hosting a website on Azure App Service (a.k.a Azure Website), you will notice that the the fonts files you uploaded return 404 to the browser. Next thing you check, the files are sitting right there in the correct path, so what's wrong?

[caption id="attachment_118" align="alignnone" width="300"] Fonts network requests return 404[/caption]

First thing you should know when you're hosting a website on Azure App Service is that you're essentially hosting the website behind IIS web server (this might not be obvious for users coming from linux background) IIS needs to be configured to serve the fonts in the correct mimeTypes in order for it to work on most modern browser (like Chrome).

To do this, you need to edit the IIS configuration file web.config as follows:



<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
    </rewrite>

    <staticContent>
      <!-- Tell IIS to serve fonts with the correct mime type -->
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />

      <!-- Tell IIS to send cache header for static contents -->
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
    </staticContent>
    
  </system.webServer>
</configuration>


The staticContent tag is where the configuration that tells IIS to work with fonts files.

While you're editing the file, you might as well add in the configuration that tells IIS to include a caching header (the clientCache tag) to static contents to utilize browser caching capability.

[caption id="attachment_119" align="alignnone" width="300"] No more 404 for fonts request.[/caption]

There's few ways that you can access the web.config file on Azure App Service.
Note: Please backup the original web.config before you proceed to edit the file.

  1. If you're hosting a Wordpress site, install a file explorer plugin, like WP File Manager, and you can edit the web.config within Wordpress

  2. If you're just hosting a static website. Use FTP. You can find the FTP login information under the "Deployment credentials" section of your Azure App Service.

Comments

Post a Comment