Woff file mime type and Azure

Question

I am trying to deploy an ASP.Net MVC4 TwitterBootstrap application to my new hosting at Azure.

All is working 100%, except, a file '\Fonts\glyphicons-halflings-regular.woff' was throwing a 404 error when using Chrome (The network tab when using F12).

I checked my solution, and the file IS there:

I googled away, and found that it was a mime type issue and Azure. I found a link that said that the fix was to add this to web.config.

<staticContent>
  <mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>

I did that, and the 404 no longer displays. HOWEVER, my page takes an extra 1.56ms to load, because it seems it downloads that woff file every time I load the page - where all other static content seems to be cached on the server on each load.

That was loading the homepage - and is the only file that gets loaded. The rest seems cached?

Loading another page, where other items are loaded, shows that this is the file that the cache doesn't seem interested in:

Is there a way to get this file cached? I think maybe a mime type needs to be added to their server somewhere? I'm kind of new to caching and mime, and Azure. Hopefully there is a solution, as this file is nearly doubling my page load times on all pages on Azure. My other Cheap host did not have this issue.

Tuinenga

Does Chrome has "Disable cache" setting in dev-tools turned on? – Christiachristian

@Christiachristian No - you can see that in the screenshot – Scapolite

Answer 1

Maybe try this... 2 things of note

1) the remove line

2) x-font-woff vs font-woff

<staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> </staticContent>

Found at http://ideasof.andersaberg.com/development/quick-fix-iis-woff-font-file-404-not-found-in-aspnet-mvc/

Millais

Answer 2

Extending Craig's answer for latest bootstrap that includes WOFF2 files. You can also add in

<system.webServer>
    <staticContent>

        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff2" mimeType="font/woff2" />

    </staticContent>
</system.webServer>

(See Proper MIME type for .woff2 fonts for a discussion on current mime type for WOFF2 files)

Vise