Starting with font-face
I’ve been using Cufón off and on since writing about font embedding back in May. It’s a great hack, but browser progress since that time has been making me feel that the native CSS@font-face rule is becoming increasingly viable. Or, at least enough so that it feels like it’s time to start dabbling.Yes, I know of TypeKit. It’s a great idea and there are some solid reasons to use it. But I’m still interested in using native files from time to time, which is where we begin.Ignoring the licensing issues for now, the problems are those of syntax and technology. Syntax because Internet Explorer requires you to import a different file than every other browser. Technology because, well, Internet Explorer requires you to import a different file than every other browser.If you just ignore IE for now then @font-face is surprisingly easy to use. Getting started requires a couple of lines of CSS and the right file in the right place. You can get a custom typeface imported into your page with just a little more work than applying a custom background image. Start with the @font-face declaration itself:@font-face { font-family: ‘Museo Sans’; src: local(’Museo Sans 500′), local(’Museo Sans’), url(MuseoSans_500.otf) format(’opentype’);
}What this is saying is: “hey browser, here’s a font family called ‘Museo Sans’. When you see reference to this font in the stylesheet please check whether the font exists on the user’s local computer. If it doesn’t then here’s a file in OpenType format that you can use instead.” I’ve specified two different faces for the local computer, both the generic family name (Museo Sans) and the specific weight I’d like to use (Museo Sans 500). This may not be strictly required, but isn’t a bad idea.Once you’ve defined the font-family all you have to do is reference it on elements you’d like to be rendered with it:h1 { font-family: “Museo Sans”, Arial, sans-serif;
}That’s it, really. Firefox, Safari, Opera, the latest versions of these browsers all work like a charm.It’s when you remember that IE won’t do anything with this that you start running into problems. Luckily, Paul Irish uncovered the magic voodoo incantation that selectively serves the right file to the right browser. The syntax is only marginally more complicated:@font-face { font-family: ‘Museo Sans’; src: url(MuseoSans_500.eot); src: local(’Museo Sans 500′), local(’Museo Sans’), url(MuseoSans_500.otf) format(’opentype’);
}I’ll leave the explanation of why that particular rule order is important to “>Paul’s article, but suffice it to say this is the syntax you should be using. (Also related, Paul’s Rich Typography presentation is worth spending some time flipping through.)So that’s the syntax part of the equation solved. But remember we also have a technological problem; IE doesn’t do anything useful with OTF or TTF files. It requires a converted, proprietary (though proposed-to-be-open) format called EOT. If you have a TTF or OTF file, how do you convert it to EOT?More on this in a follow-up post in the near future. I’ll spoil the punchline right now: the official tool for doing so is a horrible piece of abandonware that might work if you get lucky (I didn’t). The alternatives are largely arcane command line tools that, apparently, work for some (not me).However, there is a way. It ain’t pretty. But it has the advantage of actually working.
Loading...