Modern Font Embedding or How I learned to hate IE all over again

** Note: This post is so out of date as to be useless. Ignore it! **

###A New Hope

Since the dawn of time, man has yearned for full control of fonts on his website. For many years, though, we’ve been stuck using just the fonts that we can reliably expect every user to have installed on their machines.

However, hope has come at last; no longer must we toil in typographic mediocrity. As of summer-ish of 2009, most major browsers (Safari, Firefox, IE) support it (in anticipation of the CSS 3.0 spec). We are now free from the shackles of conformist font faces!

Given all this, I decided to have a go of playing with embedded fonts on www.kevinkuchta.com. It’s easy, what could go wrong?

###Fail and You Of course, it’s not that simple (it never is). IE’s been doing font embedding since it was put in the CSS 2.0 specification (then subsequently removed in CSS 2.1). As such, they do it entirely different from everyone else (and, for that matter, the spec).

There are plenty of other references on font embedding , but I thought I’d focus specifically on the weird things IE does, since that’s what’s been giving me some fun headaches. Hopefully this will save some people some trouble in the future.

###Things IE Doesn’t do

####Multiple Font Sources In an ideal world, your font list could look something like this:

src: url("/fonts/HelNuBold.ttf"), url("/fonts/HelNuBold.eot")

If any given source failed for whatever reason, it’d fail over to the next on on the list, and this is exactly what Firefox et. al will do. IE, on the other hand, will fail entirely if it sees multiple source declarations on one line like that. It tries to load the font entitled: "/fonts/HelNuBold.ttf"), url("/fonts/HelNuBold.eot"

####Local Font Sources Ideally, you could declare a font-face that would look first to a local source:

src: local("Helvetica Neue Italic")

This would be especially useful in conjunction with multiple font sources. IE doesn’t like the “local” syntax, though, and will ignore a line with local in it. This is actually useful if you want to set up a source list that IE will ignore, but Firefox et al. will read.

####Font Weights Some fonts have different actual font files for bold text- it’d be nice if we could set up a set of fonts to automatically switch to the correct font whenever a section of text in a certain embedded font was bolded. It’d work something like this:

@font-face{
    font-family: "somefont";
    src: "url("/fonts/HelveticaNeueBold.ttf")"
    font-weight: 700;
}
@font-face{
    font-family: "somefont";
    src: "url("/fonts/HelveticaNeueRegular.ttf")"
    font-weight: 400;
}

This is even more useful when dealing with a font (like Helvetica Neue) that has half a dozen different font-weights, from UltraLight to Black. Of course, true to form, IE fails and Firefox/Safari work fine. What’s interesting about this one, though, is that it fails non-deterministically. It will decide to render bold/regular fonts with random fonts, weights, and variously condensed/expanded.

It makes for a cool party trick to switch fonts randomly on different reloads from static css/html. If you have access to IE, you can check out a live demo, in which I’ve assigned several very different fonts to the same font-family but different font-weights; try reloading a few times. If you don’t have IE, you can see the effect using the excellent IE testing tool Netrender and reloading a few times.

####Font Styles Very similar to how you’d use font-weights- italicized text would automatically use the italicized font, rather than just being slanted by some browser algorithm. It’d look like:

@font-face{
    font-family: "somefont";
    src: "url("/fonts/HelveticaNeueRegular.ttf")"
    font-style: normal;
}
@font-face{
    font-family: "somefont";
    src: "url("/fonts/HelveticaNeueItalic.ttf")"
    font-style: italic;
}

But, of course, IE reacts non-deterministically to this. Firefox/Safari work fine.

####TTFs Everyone’s gotta have their own font format, of course. Firefox/Safari take, among others, .ttf (TrueType Font) files, whereas IE takes .eot “Embedded Open Type” files. The technical differences between these two are a topic for another post, but for the purposes of embedding, they can be treated the same. For those starting out with ttf’s or otf’s, I cannot recommend highly enough the font generator by Font Squirrel. It’ll output the necessary eot’s as well as the correct CSS to work in both IE and Firefox.