Web fonts: what's the deal with them, and why should we care about the recent progress? Simple questions, with lengthy answers. Web fonts are, simply as they sound, typographic faces that have been designed specifically for use on the web, and in many different sizes, resolutions, and monitor types. Sounds pretty complicated right? Well it definitely is. And, that's the main reason (perhaps aside from copyright/monetary issues) that the web has been so hand-cuffed for so long in terms of what was available for users of the web. But, a few years ago, a [few] teams of typeophiles got together to try to change this stale state of affairs.
This San Fran based startup had had enough of the status quo; and finally decided that our sIFR and Cufon implementations just weren't cutting it as well as they should/could be for expanding web typography. And we're all very lucky now that they did. Slowly, but surely, they built a simple (from the client's end) service that serves specific typefaces you choose onto your website. It sounds relatively simple, but it's definitely not. It it, however, quite fun to play around with and find faces that suit your needs. Ideally, this process would be done before the design process, or at least in conjunction with it.
The best part about the Typekit guys, well maybe not the best, they seem like swell chaps, is that they work aggressively with type makers and foundries to produce the best possible faces for the internet. They work on everything you can think of about a particular face: hinting, letting, kerning, etc. And this is no small task. Sure, the browser wars are over (for all intense purposes), but this doesn't mean it's any easier to provide good, quality, readable faces for all the browsers, all the operating systems AND all the devices. Of course this is an impossible task, so not all fonts look like you'd expect on all these different devices, so when you find a face you like, take it with a grain of salt; and test it out first. I've made the mistake before of finding an awesome face on a Mac implementing it, then when I viewed it in IE, it looked like grainy barf. And that's not a slight to either Typekit or the face maker, it's just something we have to deal with given the many, many different rendering engines in place today.
And, most importantly, they may not have the exact typeface you want to use, so that's always something to consider as well. More on this in a bit though…
Odd sounding for sure, but there is one other mainstream option we have for adding custom faces to a web page. Funny enough, it was Internet Explorer that first debuted the @font-face rules in CSS that allowed you to load custom faces off your own server. The problem was not enough users who own custom typefaces knew how to do this, or they lacked the proper formats to do so. Now, FontSquirrel takes care of this *. All you need to do is go to the site, upload the typeface(s) you want to convert, and convert them. When it's done creating the proper formats, it spits out a zipped file that includes the faces and some example code of how to call these on your site. Sounds great, right? It is, except you're kind of taking your design life in your own hands here. Most faces that are loaded up here are probably not designed specifically for the web, and therefore can get wonky at certain sizes and in certain browsers/on certain operating systems. So, if you're comfortable with your choice, then have at it with FontSquirrel.
I should say that this method also adds page weight and http requests, just like the others, but you're not depending on a third-party service and you can use almost any face you want.
Even in 2012, Web Typography has a loooooooooong way to go to catch up to it's print brethren, but thanks to a few very smart and talented people, we're all a bit closer.
Just a word of warning however, from the movie Spiderman: "With great power, comes great responsibility." By this, I mean, just because you CAN use any typeface, does not mean you SHOULD. Always consider your audience and their needs first of course.
* You must have the proper licenses for the fonts you want to use here, FontSquirrel uses the honor system, but it's really on you.
Mused on February 21, 2012