Serving web fonts from IIS

I’ve just started playing with web fonts for a site redesign. I came across the following gotcha (thanks, Firebug, for alerting me to it!).

If you are running IIS 6 or higher on your web server, some of the fonts will be disabled by default.

Your typical @font-face declaration might look like this:

@font-face {
font-family: 'VegurRegular';
src: url('Vegur-R_0500.eot');
src: local('Vegur'),
local('Vegur-Regular'),
url('Vegur-R_0500.woff') format('woff'),
url('Vegur-R_0500.ttf') format('truetype'),
url('Vegur-R_0500.svg#Vegur-Regular') format('svg');
}

This will deliver one of four different font formats, depending on your browser’s capabilities. (The font is Vegur, a really nice-looking free font I found over at Font Squirrel).

By default, the MIME types in IIS 6 are configured to deliver EOT (as used by IE) and TTF files. But WOFF (Firefox) and SVG (iPhone, iPad & others) will not be served.

Simply add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties):

.woff application/x-woff
.svg image/svg+xml

…and everything should work fine.

 

Comments

L

Very helpful. Thanks!

13 January 2011, 21:08
chetan

thank you so much....

12 April 2011, 12:06
alibaba

thanks!!!

14 May 2011, 03:49
Llad

Thank you!

21 June 2011, 17:04
ahorn

thank you!

25 June 2011, 19:55
Keith

This just saved my night. Thanks man. Now you can see the website that benefited from me fixing this config at: http://www8.healthcare.philips.com/events/astonishtf/

29 July 2011, 03:20
Claire

This is getting repetitive, but Thank you!

05 August 2011, 08:56
Joel

Thanks for the tip!

28 May 2012, 16:13
Jules Bartow

IIS shared hosting won't give you access to an Admin panel. All is not lost. Edit web.config in the root directory to add file extensions. If the problem persists, remove them as I had to do for .svg[z]. The server administrator had set them for plain text. WFM - works for me

      </webServices>

    </system.web>

    <!-- The system.webServer section is required for running ASP.NET AJAX under Internet Information Services 7.0. -->

    <system.webServer>

      <staticContent>

       <remove fileExtension=".svg" />;    

       <remove fileExtension=".svgz" />;

       <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />; <!-- Scalable Vector Graphics iPhone, iPad -->

       <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />;

       <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />   <!-- Web Open Font Format for Firefox -->

       <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />   <!-- true type font for IE-->

       <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" /> <!-- OpenType-->

       <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />   <!-- embedded open type for IE -->      

      </staticContent>

31 March 2013, 23:13
Jules Bartow

In IIS 7.0 with shared hosting where you don't have Admin privileges include in your web.config

    <system.webServer>

      <staticContent>

         <remove fileExtension=".svg" />;    

         <remove fileExtension=".svgz" />;

         <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />; <!-- Scalable Vector Graphics iPhone, iPad -->

         <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />;

         <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />   <!-- Web Open Font Format for Firefox -->

         <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />   <!-- true type font for IE-->

         <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" /> <!-- OpenType-->

         <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />   <!-- embedded open type for IE -->   

         <remove fileExtension=".KMZ" />

         <mimeMap fileExtension=".KMZ" mimeType="application/vnd.google-earth.kmz" />

         <remove fileExtension=".KML" />

         <mimeMap fileExtension=".KML" mimeType="application/vnd.google-earth.kml+xml" />

      </staticContent>

06 April 2013, 16:21