Blog

The cobbler’s children have flip-flops

I haven’t touched my professional site for years and I couldn’t bear the shame of it any longer, so I replaced it with something slightly less shameful. The process was actually an interesting retrospective on what I’ve done over the last few years, and helped me gain a bit of clarity about what I do.

At my core, I’m a guide. Like the guy who takes you on safari and provides value because he knows all the local contacts, the hiding places, the best places to see the animals, and most importantly, the things to watch out for. I’ve been developing, launching and marketing websites and web applications for my clients for over eleven years. I’ve made most of the mistakes already, and learned what works. Hopefully this new offering helps me make that case. There’s more to do, but this will have to do for now.

Putting this tiny site together also gave me a chance to fool a bit more with some CSS3 and HTML5 stuff, which I enjoyed.

I also haven’t actively blogged for a few years, and this is a place I can do that, when I have something to say.

Getting cross-domain @font-face embedding to work from IIS

FireFox and IE9 don’t allow cross-domain font embedding by default, and getting them to do it is a little tricky - here are the steps:

First - to frame our problem, you’ve got a font to embed using the @font-face technology, presumably from a service like FontSquirrel.com. For example, here on this site, I’m using this font, we’ll use this for our example.

Now you’re trying to use the font on a service like Tumblr, or maybe you’re serving your fonts from a different web server dedicated to static files (quite common) - the point is, you’re trying to serve your font files from a server different from where they are being displayed.

So, your @font-face definition will look something like this:

@font-face {
font-family: 'ChunkFiveRegular';
src: url('http://some-other-site.com/chunkfive-webfont.eot');
src: url('http://some-other-site.com/chunkfive-webfont.eot?#iefix') format('eot'),
url('http://some-other-site.com/chunkfive-webfont.woff') format('woff'),
url('http://some-other-site.com/chunkfive-webfont.ttf') format('truetype'),
url('http://some-other-site.com/chunkfive-webfont.svg#webfont90E2uSjN') format('svg');
font-weight: normal;
font-style: normal;
}

Here are the tweaks you need to make inside IIS to get this to work:

First: you need to add the header Access-Control-Allow-Origin with a value of “*” (you can restrict it more if you’d like).

Second: and especially to get it working in IE9, you need to set the proper MIME types for the font files.

.oft : font/oft
.svg : image/svg+xml
.woff : application/x-font-woff (this is the one that gets IE9 to behave).

Here’s a screenshot of the settings in IIS 6.

See Paul Irish’s compendium on the matter for more @font-face gotchas.