Font embedding has long been a hot topic amongst all parties involved. I’ve gone from ignorant to interested to indignant. That journey has culminated in a major evaluation of the resources available to me for use in actual projects for actual clients. Are embeddable fonts ready for client websites? Do the costs make it worth it? Is there a Holy Grail, a surefire technology, destined to save us?
Hint: refer back to the title.
I Want My Fancy Headings!
Let’s face facts – I’m sick of Verdana. It’s no fault of Verdana’s (though she’s always been a little large for my taste), it’s just that I’m more than ready to see other typefaces. I’ve dated Arial; I’ve flirted with Times New Roman. I had a passionate affair with Georgia that I’ve never admitted publicly. Yet, for all my years on the market, I’ve never found the one.
Sure, body copy might have to rely on the old tried-and-trues, but what about our headers? Why can’t the most important parts of our HTML shine? We put all this work into designing the perfect section headlines, which inevitably get relegated to background images or substitutes. It’s not fair. Our websites deserve to be living, breathing documents, not simply static representations of their inception. “Welcome to Our Website” might be a perfect heading for go-live day, but does it still hold up six months later? If it doesn’t, you have to find those initial design documents, create an alternate image, upload it to the live site, and make any CSS tweaks necessary.
Then I learned a startling fact; Internet Explorer has supported embeddable fonts since IE4. What? Seriously?? For whatever reason, I had assumed that embeddable fonts were a recent invention, with IE lagging behind as usual. In fact, it was almost the opposite, with the modern browsers only recently adopting their own @font-face implementations nearly a decade after Microsoft. You know what that means? We can quit stallin’ and get implementin’.
Enter the commercially-viable solutions. There seems to have been a mini ‘splosion of these services in recent months. They seek to provide two benefits: a better way to include fonts into your website and a mutually beneficial way to license fonts for web usage.
What I love about Typekit is the people behind it, the technology behind it, and the ease of use. Of all the font services, this one feels like it has the most legs. I think foundries are going to really like having their fonts hidden behind the Typekit servers, web designers are going to really like the ease with which they can browse and choose their fonts, and web developers are going to really like how easy it is to drop into HTML. The pricing feels reasonable, and they’ve worked really hard to build a reliable platform that answers a lot of concerns on all sides of the table. Still, I wasn’t satisfied with stopping there.
Typotheque, like Typekit, offers a library for you to choose from. Unlike Typekit, you license your fonts individually. When you purchase your font, you can add on a license for web embedding that font. Once you complete the transaction, you get CSS to drop into your page for that font. Ascender Fonts has taken a similar approach in pricing. After browsing their Web Font library, you can purchase the font as a web license. You can then add fonts to resources and resources to websites (don’t ask me how that all works). What’s clear is that Ascender is trying to offer users some ability to easily manage their web fonts, which can go a long way toward adoption. Also in this ring is FontSpring. FontSpring’s solution seems to be much like the other two; purchase a font with their special license, and they’ll give you some tools for dropping that CSS into your web page. Fontspring, while it offers similar embed licenses to the services above, doesn’t host the files for you. Upon purchase, you get the freedom of including the font files on your server, using the @font-face declaration of your choice. Their web license does include a number of restrictions, so be sure to read it thoroughly to see what your options are. What’s nice about all these services is they offer free trials. What isn’t nice is that you license the fonts individually. This practice differs from what print designers have enjoyed, where purchasing a font meant having it for as many publications as you needed. On the web, you’re merely renting the ability to display that font for a period of time. That can be a hard budget item to swallow.
There’s a strange in-between service here called TypeFront. TypeFront, rather than being a foundry or library service, is a web font distribution system. You upload your font (assuming you have a web license for it), you add domain names that can use that font, and then you drop their CSS into your website. You aren’t stuck paying for individual fonts, but you don’t have the library of options, either. This solution is perhaps best for the web developer who has the fonts but doesn’t want to deal with hosting or embedding them. However, I think that’s a small cross-section of developers.
The only thing better than paying someone to do the work for you is to get the same product for free. Kernest is a service much like the CSS-based foundry sites above except that it offers a wide range of free fonts as well. You add domain names, which simply allows the system to create customized CSS for that domain. The most severely limiting factor for Kernest is the lack of selection. It’s nice that most of the fonts are free, but the trick will be in acquiring interesting-enough fonts to bring people back. I, for one, will not be going back.
This begs the question, why use a service at all? This stuff isn’t rocket science. Can’t one reasonably find the tools and syntax (1,2,3) to put together a cross-browser font statement? Well, yes, you can. You could browse the list of fonts available for @font-face embedding on Webfonts.info. Then you could browse any number of web design websites for snippets and tips and tricks. Just drop the font onto your webserver, add the appropriate rules, and style up your headlines. It’s that easy.
That brings us to my favorite service so far. It’s a website called Font Squirrel. Font Squirrel offers the do-it-yourselfers a little leg up. You can use their system one of two ways. The first way is to browse their site for the font of your dreams. Font Squirrel has partnered with an impressive list of foundries to offer a decent list of fonts. I wish it was the other way around, but I’ve got time on my side.
Every font is “100% free for commercial use”, so boasts the Font Squirrel logo. The fonts can be filtered by style or technology, as well as by foundry. When viewing a particular font, you have the standard specimen, character map, and type your message options to help make your decision. When you’re ready to use the font, you can download the font file itself or an @font-face kit which includes fonts, demo page, and stylesheet to make including that font on your website a breeze (like I’ve done here).
The second option that Font Squirrel offers is its @font-face Generator, a tool that makes creating cross-browser @font-face rules easy and pain-free. You give the system your font, and it gives you a series of options. When you’re done, you download an @font-face kit just like you would above. This tool worked like a charm for me, and it produced the font I gave it in all formats necessary for the browsers we test in.
This combination of browsing a library of fonts and generating your own specific font kit give Font Squirrel a one-two punch. If the font list keeps improving, Font Squirrel could be a heavy rival in the web font game, even up against the commercial services which might seem more legitimate. Free certainly doesn’t hurt, but I’m willing to bet that they will adopt a pay model before too long, with access to more popular fonts.
I don’t think there’s been a clear winner in this web font arena. Font formats are still getting a healthy debate, let alone how to serve them up and embed them onto web pages. However, I think what will help give this movement steam is usage and adoption. Foundries need to know that it’s safe to invest in services like those above. Those same services need to know that developers and designers will use their technology and pay reasonably for it. Lastly, and most importantly, web developers and designers need to know that there are good, high-quality fonts out there for web embedding.
Web designers, please seek out a web embeddable library of fonts for consideration in your next project. Talk with your developers about what technologies they have used and are comfortable with. A well chosen font can free your design of typographical boredom and still save time when turning it into HTML. It sounds impossible but it isn’t.
You might never have to use Verdana again. Just don’t tell her I said that.
My research: http://delicious.com/awayken/ls-webworks+20100323
UPDATE: A comment by Ethan Dunham clarifies the details behind Fontspring. I’ve updated the post appropriately.