WOFF files and Azure: the 404 WTH

By brianmrushAzure, css

Have you ever run into an issue where you developed a great looking site and you move the site up to Azure but some of the CSS is not rendering correctly?  Your site looks great because you are using some WOFF files (Web Open Font Format files).  WTH, why is this not working in Azure.  Like a good developer you open dev tools and find you are getting a 404

Your CSS might look something like this:

@font-face {
  font-family: 'Gentleman500';
  src: url('./../fonts/Gentleman-500-Book.eot'); /* IE9 Compat Modes */
  src: url('./../fonts/Gentleman-500-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./../fonts/Gentleman-500-Book.woff') format('woff'), /* Modern Browsers */
       url('./../fonts/Gentleman-500-Book.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./../fonts/Gentleman-500-Book.svg#Gentleman500-Book') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

You see the 404s in dev tools and the next thing you are thinking is “great welcome to cloud computing and the wild goose chase of finding out why this is not working”.  Well, the  good news is there is an easy solution.  You just need to tell Azure about the MIME Type.  You can do that easily in the web.config

 

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

Goose chase averted. Onto next problem.

Leave a Reply