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’.
Baby Steps
My first adventures into this realm were through Flash-based replacement services, usually called sIFR. The way it worked was that you would provide a font to a Flash script, which would get dropped into your HTML via Javascript. This meant that every place you wanted to use this fancy font (every headline, for instance) was now a little Flash movie. Wow. The issue I had with this technique is that I don’t use Flash much. This means that if the Flash file wouldn’t work for some reason, I’d be fairly powerless to correct or debug it. NEXT.
I tried Cufón, and I really liked the concept and technology behind it. Cufón is a Javascript-based solution, and it has two parts: first you generate your font, then you embed it on your webpage. You upload a font to the Cufón website, which gets converted to JSON. Essentially, your font file gets turned into instructions for drawing that font. How cool is that? The Cufón converter turns your font file into a Javascript file that you include into your document like any other Javascript. Then the Cufón Javascript renders your font as VML (for IE) or canvas (for everyone else), doing a similar find and replace as sIFR above. Despite how much I loved the creativity behind this solution (and the beautiful way it displayed), it seemed only marginally better than the Flash technique. NEXT.
Toddler Steps
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.
Typekit was my first venture into this space mostly due to mutual timing. Typekit was getting some buzz while I was getting really interested in this new technology. I got in during some of the beta testing (score!), and I immediately started playing with the service. You pick a plan, you pick your fonts, you drop some Javascript into your website, and you enjoy. The Typekit system allows you to manage your various websites from one fancy kit editor. You could also set all your CSS rules from said kit editor.
Typekit has a decent selection of fonts. You can browse the entire library, or simply the fonts from your plan. If you browse the whole library, and you’re logged in, you can see which fonts you need to upgrade to get. Typekit also does a great job of categorizing their fonts, making them easily browsed. Want a sans-serif font that is “clean” and “fun”? Try Sovba. Typekit is also one of the few Javascript-based solutions; the others that I’ve found mostly use a custom CSS method.
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.
Teenage Steps
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.
Adult Steps
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.
Next Steps
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.
Miles – this is Garrick from Kernest – could you elaborate on Kernest’s lack of selection? It’d be helpful for me to understand what types of things you’re looking for as I continued to revise and grow Kernest – [email protected] – thanks.
@Garrick: I’ll email you these comments as well.
Upon second inspection, I’ve found that your font selection isn’t as minimal as I thought. The problem, though, was that I couldn’t tell. The homepage is dominated by a white box with a welcome message. While this is a clever way to display an interactive and powerful demonstration of your product, it made me wonder if I was in the right place. Was that the only font they have? Where are the others? There’s no way for me to just browse fonts without making a decision: serif, sans-serif, or script. I found this frustrating and disorienting.
Picking a font is a visual experience, and sometimes you don’t even know the basic type of font you want. In my blog post, I used a blackletter font called Gregorian for the titles. I didn’t seek out a blackletter font; I was seeking an attention-getting font, and it just happened to be a blackletter.
I have some ideas for your website, if you’ll permit. Of course, these are just my opinion, and I certainly don’t want to disparage your website. I think every website devoted to the font embedding movement is a gem and to be highly commended for their efforts to bring better typography to the web. Your site, in particular, has an impressive tool for playing the fonts that you offer, allowing users to really see how the font plays with various CSS properties. This tool is much more than a lot of services are offering right now.
I think, and this is my personal opinion, that your homepage should show off your hottest fonts, either chosen personally or via usage by users of the site. To browse for fonts, I’ve found I only need one line of text at around 26 pixels to get a good sense for the font. I think the mixed-case alphabet works best for seeing the range of glyphs that a font covers. I’d also like to be able to browse all fonts, with options to filter my browsing by various font properties. Also, I wouldn’t separate pay fonts from free. Let the user choose their font first, and then decide if they want to pay for it. I’ve purchased a font more than once because I fell in love with it first and considered the cost second. However, if given the choice, I’ll browse a free selection and ignore a paid selection.
My last suggestion is actually a tweak to one of the best features of your site: the sample box. I love the features you’ve built into this technology. I think it’s a great asset, giving users a lot of options for tweaking. Perhaps you could make those options a little more user friendly. How about a select box for font size, with an option for typing your own? Or simply a slider? Color pickers on the font color and background color are a must for anyone who doesn’t regularly use CSS. The other properties, too, could benefit from sliders of some sort. All of these controls could have manual versions as well for those who know what they want. It would make playing with the font a little easier for non-technical users.
In all, I think Kernest just needs to make discovering its fonts a little easier. Selection is going to be a big player in this font game, and the easier a user can browse your selection, the better off you are.
I’ve added @Kernest to my Twitter, and I’m excited to see how the site and service grows. Thanks for the comment!