Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

FontAwesome Fonts and Mime Types in IIS and other Web Servers


When running FontAwesome and loading resources from IIS locally and checking out a page loaded in browser dev tools you might find that you get a 404 Not found on your page like this:

404woff

If you open the link you're going to find that the server returned a 404 Not Found response.

FontAwesome includes and references fonts in a number of different ways and basically loads the font file that it both understands and can load from the server.

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0')
format('embedded-opentype')
,
url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular')
format('svg')
;
font-weight: normal; font-style: normal; }

As you can see FontAwesome tries to load a number of different font types. This works by letting the browser find the type that it supports and then trying to load the file. If the file is not found the browser continues down the list.

So in the case of Chrome, it supports WOFF2 font type – it tries to load it and it fails because the server is not ready to serve the file. It then goes on and loads the .WOFF files (v1) and that's what's ends up getting used.

The .WOFF2 format is something that's rather new which is why it doesn't show up in many a Web server's default Mime map. From the looks of it WOFF2 uses better compression than .WOFF, so one benefit is that the Fontawesome .WOFF2 file is 20% smaller than the .WOFF file.

Why does IIS not serve the .WOFF2 File?

Depending on which version of IIS you use you'll find that it will not serve the .WOFF2 and in older versions (2008 R2 and older) even the .WOFF file. The reason is that these formats do not exist in the Mime type list for IIS. Any static file type served by IIS that not either dynamically mapped handler (ISAPI Handler or .NET HttpHandler), or has an entry in the IIS Mime map, will end up being served as a 404 Not Found HTTP error.

IIS 10 has both .WOFF and .WOFF2 mapped so it just works. On IIS 8 .WOFF is registered and on older version none are registered.

Set the Mime Types

In IIS you can set the mime types in a number of ways both local to your application and global at the IIS or Application level. Personally I think Mime Maps ought to be set globally at the top level so lets start with that. You can set the global settings in the IIS Service manager:

IISMimeMap

IISMimeMap2

You can also use the IIS command line tool appcmd like this:

c:\windows\system32\inetsrv\appcmd
             set config /
             section:staticContent /+
                         "[fileExtension='
.woff2 ',mimeType=' application/font-woff2']"

Applying Mime Types Locally to your Application

If you need to apply these settings locally, or when you have no control over the Web server globally you can also add this at the Application level in your web.config file:

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

    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
  </staticContent>
</system.webServer>

FWIW, this isn't just an IIS issue - the same thing comes up with other Web servers that might not have the most recent Mime mappings set. As mentioned  .WOFF2 is relatively new, so it's not unusual to find it missing in many Web server configurations. Follow instructions for your particular Web server to configure a mime type entry.

Why Bother? Performance!

Now you might ask, why does this matter? Even with the missing .WOFF2 entry, Chrome will eventually find a font that it knows about and can find on the server. So why should you care? After all it works without all the fuss.

A 404 request is still a server request and there's latency and some bandwidth (headers and response) involved with every 404 request. Additionally, 404's on a server are nasty because they don't cache. So unlike a successful resource request which eventually ends up in the cache and won't get requested again by a browser,  a 404 will always be re-requested adding extra overhead to any request that has to load your font so you take that extra server round trip on every page load that loads this 404 resource even if it was previously requested.

So, it's always a good idea to hunt down 404 errors in applications especially for things that get fired on every page (especially things like favicon.ico - See Hanselman's story on this topic).

Additionally FontAwesome's .WOFF2 file is 20% smaller than the .WOFF file, so there's some good bandwidth savings as well.

Another good option for something like FontAwesome or Bootstrap is to use a CDN to offload the font/css/script loading from your server altogether. CDNs will make sure that the  files in a distribution can be served, so you can completely side-step these typed of missing MIME map problems entirely.

Resources


I'll be at DevIntersection in Vegas this fall giving sessions on ASP.NET Core with Angular and Localization. Thinking of coming? Use discount code STRAHL and save a few bucks. If you do be sure to stop by and say hello!

ASP.NET DevIntersection 2017. Rick Strahl Coupon Code

Posted in CSS  HTML5  

The Voices of Reason


 

Jonathan
January 26, 2016

# re: FontAwesome Fonts and Mime Types in IIS and other Web Servers

I've been seeing those woff 404 logs in the Chrome developer console for a while now, but I haven't bothered to actually try and "fix" them, or even to go and look for an explanation. I'm glad that I finally understand what it's all about now, having stumbled on this blog post of yours. Thanks! :)

Manoj Kulkarni
February 10, 2016

# re: FontAwesome Fonts and Mime Types in IIS and other Web Servers

Nice article. Thank you for sharing

Alex
February 19, 2016

# re: FontAwesome Fonts and Mime Types in IIS and other Web Servers

Great article, thanks for sharing. Just wanted to add that the "web.config-way" works with IIS Express/VS Dev server too.

Rick Strahl
February 19, 2016

# re: FontAwesome Fonts and Mime Types in IIS and other Web Servers

@Alex - IIS Express support is a great point!

Yuri
March 11, 2016

# re: FontAwesome Fonts and Mime Types in IIS and other Web Servers

In my IISExpress ver.10.0 config directory inside "applicationhost.config" I found:
...
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
...
so I did extra entry only for woff2 like:
<mimeMap fileExtension=".woff2" mimeType="font/x-woff2" />

As you can see mimeType is "font/x-woff2" and this also is working fine

Thanks for article :)
 

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2017