Setup @font-face with IIS and MIME Types

Setup @font-face

Adding embedding custom fonts to your website has becoming quite an easy process. Here are the steps:

Find the font you want to use (.eot/.woff/.ttf/.svg), and upload it to your site.

Open up your CSS file, and add the following:

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

Replace ‘MyWebFont’ with the name of the font you are using, and make sure the path to the font is correct.
See The New Bulletproof @Font-Face Syntax for a wonderful explaination.

Next, is simply add:
```
font-family: 'MyWebFont';
```
where you like in your CSS to magically have your new font implemented.

The Issues with IIS and MIME Types

404 File Not Found!

What?

Unfortunately IIS doesn’t may not be aware of the mime type for the font files (.eot/.woff/.ttf/.svg), so it refuses serve it to the client. This can resolved very easily by adding a few lines to your webconfig file, in :

<staticContent>
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>

Ref: IIS 7 Web.config change for HTML5 and CSS3 mime types

PS: Ban Comic Sans