Using @font-face with IIS

The first time I used CSS3's @font-face property in a .NET environment, I realized fonts didn't load right because the mime types in IIS were either wrong or non-existent. So here's a quick reference for what file formats you're going to need for proper @font-face usage:

.eot (application/vnd.ms-fontobject)
.svg (image/svg+xml)
.ttf (font/ttf)
.woff (font/x-woff)

The default mime types for .eot and .ttf are different than the ones above, but I replace the defaults with these. I'm just a front end guy, so these work for me for local development. If these are wrong or you know of a better way to do this, let me know and I'll update my post.

A look back

As I'm sitting here coding the front end of a website, I started thinking about how easy this stuff is these days. Is that div a couple pixels off? A quick hit of F12 and Firebug pops up. A couple of key presses to nudge the element and I instantly know what to change in my code. Wow. Stupidly simple.

Sure, we complain about browsers - fact that @font-face doesn't render as well as web fonts might, or that Internet Explorer 8 doesn't support rounded corners - but when put into perspective, these issues are pretty insignificant.

I remember back to the first time I dealt with browser compatibility. It was during my yearbook days of high school, and I wanted to show my teacher what I had built. She fired up Netscape (possibly AOL) on her Mac and entered my url. To my surprise, my website, which used a blue background, was somehow green on her computer. I was embarrassed, and didn't understand why the 6-character hex color I chose didn't show up the same on her screen.

Little did I know the color I used wasn't web-safe, something we don't even have to deal with anymore. I also remember designing in Paint, and using an online tool to help me convert RGB colors to hexadecimal. Sure, Photoshop was around then, but I didn't have it. It was just a program I used in class to edit pictures for yearbook. I used notepad to write code, Paint to "design". When I started playing with websites in 2002, those were my tools.

And I know I didn't even have the worst of it. I came into the game somewhat late. I know many of you predated me on the web. The first version of Photoshop I used was Photoshop 5. I can't even imagine what it was like before then. I'm sure many of you had it worse than I did.

So my point is... today as we work, doing whatever it is we do, let's try to be thankful for the fact that our problems are relatively insignificant to the problems of yesterday. And to all you newbies who picked up design or coding in the past few years, consider yourself lucky that you were spared from a whole lot of headaches. =]