WOFF files return 404 (Not Found) in Azure Web Sites

Published


I've just starting using Azure Web Sites to publish certain sites.  I've also recently braved using web fonts from certain providers.

After publishing my site today, I noticed when I ran it, that the WOFF font type was returning a 404 error:

WOFF file 404 on Azure Web Site

After treble checking my settings in Visual Studio 2013, the file was definitely there and not excluded from the project:

WOFF files in VS2013 project 

MIME Recognition

It turns out that the problem is actually caused by Azure, not by anything we've done wrong!  Azure doesn't actually have a MIME type configured for WOFF files, so simply returns 404 (surely there would be a better HTTP Error number for this?!?).

The fix is really simple.  Head to the web.config file and add a <staticContent> into the <configuration> element:

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

Once that's in, Azure correctly delivers our WOFF files:

WOFF file served by Azure 

Phew.  Time for a beer :-)

Comments

Posted by Another on 5/15/2014

This needs to be higher up in the results! Just put this in Web.config. Works for me.

Posted by Andrew Truman on 7/28/2014

Woo! You are a genius. GIVE YOUR BRAIN A FEW MORE BEERS!

Posted by Russ on 9/30/2014

Thanks man, works great

Posted by Dima on 10/23/2014

It works. Buddy, you saved me an hour. Thanks!

Posted by Mark on 11/27/2014

Worked for me.  Thanks for posting.

Posted by Avi Algaly on 4/15/2015

Worked for me also!
Thanks

Posted by stefman on 4/28/2015

Cheers fella!!!

Posted by Efroim on 7/22/2015

Works!
I had an Angular app with materialize css and the .woff and .woff2 files gave me a 404 so I added a line for each.

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

Thanks

Posted by jalpcast on 7/31/2015

Thanks!!!!!!

Posted by HM on 12/7/2015

Works great, thank you!

Posted by Salom on 2/19/2016

Thanx a lot!

Posted by EngineeringNinja on 4/23/2016

worked for me as well...a fantastic little gem, thanks for posting!

Posted by Aldav on 5/12/2016

Thanks, this worked great!

Posted by Antoniodltm on 6/3/2016

Incredible! Thanks.

Posted by OlegFilth on 6/29/2016

GREAT! I love you man!)

Posted by DesperateMan on 7/18/2016

You are a Hero man! THX

Posted by Mc on 7/26/2016

I looked high and low, through stackoverflow and azure documentation... none of the recommendations worked but this one worked as-is!

Posted by Anupal on 7/30/2016

Thanks. :)

Posted by dalp12 on 9/15/2016

gracias!

Posted by Jorris Besselink on 9/22/2016

Thanks for saving me the time figureing this out myself.
Have a beer on me!

Posted by Lars on 10/10/2016

Thank you for this post!!

Posted by kean on 10/30/2016

works! thanks mate

Posted by Rich on 11/17/2016

Works! Cheers!

Posted by Nicolas on 11/18/2016

Thanks!

Posted by lvul on 12/12/2016

Worked like a charm !

Posted by JB on 1/10/2017

BAM!  Thanks!!!

Posted by Srany on 2/8/2017

Beer for you! Thanks!

Posted by NMathur on 2/16/2017

Not worked for me :( .. website is deployed on azure.

Posted by Onur on 2/17/2017

My angular2 site didn't even have a web.config. I created one from scratch, added the lines you mentioned above and now all I get is an internal server error.

What do you suggest for sites that don't even have a web.config?

Posted by Leo on 6/22/2017

Awesome! tks a lot!

Posted by Raju on 10/27/2017

Thanks, helped me fix those issues. :)

Posted by Yurets on 2/23/2018

Thank you very much!

Posted by TM on 4/4/2018

Worked for me. Thank you!!

Posted by Pratik Patel on 5/15/2018

Thanks buddy it working.......

Posted by DenverCoder9 on 5/23/2018

Thanks! This issue was driving me crazy--this worked like a charm to fix it!

Posted by David on 10/24/2018

Soooo very helpful. Thank you.

Posted by Roel on 10/25/2018

Thanks it worked! Cheers!

This should be up the results much higher.

Posted by Jose Marcenaro on 11/29/2018

4+ years later this post is still useful.  Thanks buddy!

Posted by walt on 12/3/2018

yah 4+ years this post is useful... after (hours)trying to fix it, thinking it's a problem with my css... then finding this solution... I need a beer...  thanks man... you'd think azure would find a global fix for this...

Posted by Dan Miser on 12/13/2018

Great article. After reading the solution, I remember doing it many years before, but I hit it again on a new project and this was a life saver. Thanks!

Posted by fabio rodrigues on 12/27/2018

thank you dude!! nice job!! +4year this script is perfect in my azure

Posted by Crayne on 3/3/2019

YOU ARE A LIFESAVER!!!! Thank you for this.

Posted by Jose lopez on 5/27/2019

Thank you

Posted by Bruce on 12/5/2019

Thanks!  Still helping people out 5 years later :)

New Comment





This is to prove that you are not a spam robot posting links to dodgy sites!