Web Fonts: My Journey to ‘Good Enough for Now’

Font embed­ding has long been a hot topic amongst all par­ties involved. I’ve gone from igno­rant to inter­ested to indig­nant. That jour­ney has cul­mi­nated in a major eval­u­a­tion of the resources avail­able to me for use in actual projects for actual clients. Are embed­d­a­ble fonts ready for client web­sites? Do the costs make it worth it? Is there a Holy Grail, a sure­fire tech­nol­ogy, des­tined to save us?

Hint: refer back to the title.

I Want My Fancy Headings!

Let’s face facts — I’m sick of Ver­dana. It’s no fault of Verdana’s (though she’s always been a lit­tle large for my taste), it’s just that I’m more than ready to see other type­faces. I’ve dated Arial; I’ve flirted with Times New Roman. I had a pas­sion­ate affair with Geor­gia that I’ve never admit­ted pub­licly. Yet, for all my years on the mar­ket, I’ve never found the one.

Sure, body copy might have to rely on the old tried-and-trues, but what about our head­ers? Why can’t the most impor­tant parts of our HTML shine? We put all this work into design­ing the per­fect sec­tion head­lines, which inevitably get rel­e­gated to back­ground images or sub­sti­tutes. It’s not fair. Our web­sites deserve to be liv­ing, breath­ing doc­u­ments, not sim­ply sta­tic rep­re­sen­ta­tions of their incep­tion. “Wel­come to Our Web­site” might be a per­fect head­ing for go-live day, but does it still hold up six months later? If it doesn’t, you have to find those ini­tial design doc­u­ments, cre­ate an alter­nate image, upload it to the live site, and make any CSS tweaks necessary.

Then I learned a star­tling fact; Inter­net Explorer has sup­ported embed­d­a­ble fonts since IE4. What? Seri­ously?? For what­ever rea­son, I had assumed that embed­d­a­ble fonts were a recent inven­tion, with IE lag­ging behind as usual. In fact, it was almost the oppo­site, with the mod­ern browsers only recently adopt­ing their own @font-face imple­men­ta­tions nearly a decade after Microsoft. You know what that means? We can quit stallin’ and get implementin’.

Baby Steps

My first adven­tures into this realm were through Flash-based replace­ment ser­vices, usu­ally called sIFR. The way it worked was that you would pro­vide 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 head­line, for instance) was now a lit­tle Flash movie. Wow. The issue I had with this tech­nique is that I don’t use Flash much. This means that if the Flash file wouldn’t work for some rea­son, I’d be fairly pow­er­less to cor­rect or debug it. NEXT.

I tried Cufón, and I really liked the con­cept and tech­nol­ogy behind it. Cufón is a Javascript-based solu­tion, and it has two parts: first you gen­er­ate your font, then you embed it on your web­page. You upload a font to the Cufón web­site, which gets con­verted to JSON. Essen­tially, your font file gets turned into instruc­tions for draw­ing that font. How cool is that? The Cufón con­verter turns your font file into a Javascript file that you include into your doc­u­ment like any other Javascript. Then the Cufón Javascript ren­ders your font as VML (for IE) or can­vas (for every­one else), doing a sim­i­lar find and replace as sIFR above. Despite how much I loved the cre­ativ­ity behind this solu­tion (and the beau­ti­ful way it dis­played), it seemed only mar­gin­ally bet­ter than the Flash tech­nique. NEXT.

Tod­dler Steps

Enter the commercially-viable solu­tions. There seems to have been a mini ‘splo­sion of these ser­vices in recent months. They seek to pro­vide two ben­e­fits: a bet­ter way to include fonts into your web­site and a mutu­ally ben­e­fi­cial way to license fonts for web usage.

Type­kit was my first ven­ture into this space mostly due to mutual tim­ing. Type­kit was get­ting some buzz while I was get­ting really inter­ested in this new tech­nol­ogy. I got in dur­ing some of the beta test­ing (score!), and I imme­di­ately started play­ing with the ser­vice. You pick a plan, you pick your fonts, you drop some Javascript into your web­site, and you enjoy. The Type­kit sys­tem allows you to man­age your var­i­ous web­sites from one fancy kit edi­tor. You could also set all your CSS rules from said kit editor.

Type­kit has a decent selec­tion of fonts. You can browse the entire library, or sim­ply 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. Type­kit also does a great job of cat­e­go­riz­ing their fonts, mak­ing them eas­ily browsed. Want a sans-serif font that is “clean” and “fun”? Try Sovba. Type­kit is also one of the few Javascript-based solu­tions; the oth­ers that I’ve found mostly use a cus­tom CSS method.

What I love about Type­kit is the peo­ple behind it, the tech­nol­ogy behind it, and the ease of use. Of all the font ser­vices, this one feels like it has the most legs. I think foundries are going to really like hav­ing their fonts hid­den behind the Type­kit servers, web design­ers are going to really like the ease with which they can browse and choose their fonts, and web devel­op­ers are going to really like how easy it is to drop into HTML. The pric­ing feels rea­son­able, and they’ve worked really hard to build a reli­able plat­form that answers a lot of con­cerns on all sides of the table. Still, I wasn’t sat­is­fied with stop­ping there.

Typotheque, like Type­kit, offers a library for you to choose from. Unlike Type­kit, you license your fonts indi­vid­u­ally. When you pur­chase your font, you can add on a license for web embed­ding that font. Once you com­plete the trans­ac­tion, you get CSS to drop into your page for that font. Ascen­der Fonts has taken a sim­i­lar approach in pric­ing. After brows­ing their Web Font library, you can pur­chase the font as a web license. You can then add fonts to resources and resources to web­sites (don’t ask me how that all works). What’s clear is that Ascen­der is try­ing to offer users some abil­ity to eas­ily man­age their web fonts, which can go a long way toward adop­tion. Also in this ring is FontSpring. FontSpring’s solu­tion seems to be much like the other two; pur­chase a font with their spe­cial license, and they’ll give you some tools for drop­ping that CSS into your web page. Fontspring, while it offers sim­i­lar embed licenses to the ser­vices above, doesn’t host the files for you. Upon pur­chase, you get the free­dom of includ­ing the font files on your server, using the @font-face dec­la­ra­tion of your choice. Their web license does include a num­ber of restric­tions, so be sure to read it thor­oughly to see what your options are. What’s nice about all these ser­vices is they offer free tri­als. What isn’t nice is that you license the fonts indi­vid­u­ally. This prac­tice dif­fers from what print design­ers have enjoyed, where pur­chas­ing a font meant hav­ing it for as many pub­li­ca­tions as you needed. On the web, you’re merely rent­ing the abil­ity to dis­play that font for a period of time. That can be a hard bud­get item to swallow.

There’s a strange in-between ser­vice here called Type­Front. Type­Front, rather than being a foundry or library ser­vice, is a web font dis­tri­b­u­tion sys­tem. You upload your font (assum­ing you have a web license for it), you add domain names that can use that font, and then you drop their CSS into your web­site. You aren’t stuck pay­ing for indi­vid­ual fonts, but you don’t have the library of options, either. This solu­tion is per­haps best for the web devel­oper who has the fonts but doesn’t want to deal with host­ing or embed­ding them. How­ever, I think that’s a small cross-section of developers.

Teenage Steps

The only thing bet­ter than pay­ing some­one to do the work for you is to get the same prod­uct for free. Kernest is a ser­vice 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 sim­ply allows the sys­tem to cre­ate cus­tomized CSS for that domain. The most severely lim­it­ing fac­tor for Kernest is the lack of selec­tion. It’s nice that most of the fonts are free, but the trick will be in acquir­ing interesting-enough fonts to bring peo­ple back. I, for one, will not be going back.

This begs the ques­tion, why use a ser­vice at all? This stuff isn’t rocket sci­ence. Can’t one rea­son­ably find the tools and syn­tax (1,2,3) to put together a cross-browser font state­ment? Well, yes, you can. You could browse the list of fonts avail­able for @font-face embed­ding on Webfonts.info. Then you could browse any num­ber of web design web­sites for snip­pets and tips and tricks. Just drop the font onto your web­server, add the appro­pri­ate rules, and style up your head­lines. It’s that easy.

Adult Steps

That brings us to my favorite ser­vice so far. It’s a web­site called Font Squir­rel. Font Squir­rel offers the do-it-yourselfers a lit­tle leg up. You can use their sys­tem one of two ways. The first way is to browse their site for the font of your dreams. Font Squir­rel has part­nered with an impres­sive 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 com­mer­cial use”, so boasts the Font Squir­rel logo. The fonts can be fil­tered by style or tech­nol­ogy, as well as by foundry. When view­ing a par­tic­u­lar font, you have the stan­dard spec­i­men, char­ac­ter map, and type your mes­sage options to help make your deci­sion. When you’re ready to use the font, you can down­load the font file itself or an @font-face kit which includes fonts, demo page, and stylesheet to make includ­ing that font on your web­site a breeze (like I’ve done here).

The sec­ond option that Font Squir­rel offers is its @font-face Gen­er­a­tor, a tool that makes cre­at­ing cross-browser @font-face rules easy and pain-free. You give the sys­tem your font, and it gives you a series of options. When you’re done, you down­load an @font-face kit just like you would above. This tool worked like a charm for me, and it pro­duced the font I gave it in all for­mats nec­es­sary for the browsers we test in.

This com­bi­na­tion of brows­ing a library of fonts and gen­er­at­ing your own spe­cific font kit give Font Squir­rel a one-two punch. If the font list keeps improv­ing, Font Squir­rel could be a heavy rival in the web font game, even up against the com­mer­cial ser­vices which might seem more legit­i­mate. Free cer­tainly doesn’t hurt, but I’m will­ing to bet that they will adopt a pay model before too long, with access to more pop­u­lar fonts.

Next Steps

I don’t think there’s been a clear win­ner in this web font arena. Font for­mats are still get­ting a healthy debate, let alone how to serve them up and embed them onto web pages. How­ever, I think what will help give this move­ment steam is usage and adop­tion. Foundries need to know that it’s safe to invest in ser­vices like those above. Those same ser­vices need to know that devel­op­ers and design­ers will use their tech­nol­ogy and pay rea­son­ably for it. Lastly, and most impor­tantly, web devel­op­ers and design­ers need to know that there are good, high-quality fonts out there for web embedding.

Web design­ers, please seek out a web embed­d­a­ble library of fonts for con­sid­er­a­tion in your next project. Talk with your devel­op­ers about what tech­nolo­gies they have used and are com­fort­able with. A well cho­sen font can free your design of typo­graph­i­cal bore­dom and still save time when turn­ing it into HTML. It sounds impos­si­ble but it isn’t.

You might never have to use Ver­dana again. Just don’t tell her I said that.

My research: http://delicious.com/awayken/ls-webworks+20100323

UPDATE: A com­ment by Ethan Dun­ham clar­i­fies the details behind Fontspring. I’ve updated the post appropriately.

2 thoughts on “Web Fonts: My Journey to ‘Good Enough for Now’”

    1. @Garrick: I’ll email you these com­ments as well.

      Upon sec­ond inspec­tion, I’ve found that your font selec­tion isn’t as min­i­mal as I thought. The prob­lem, though, was that I couldn’t tell. The home­page is dom­i­nated by a white box with a wel­come mes­sage. While this is a clever way to dis­play an inter­ac­tive and pow­er­ful demon­stra­tion of your prod­uct, it made me won­der if I was in the right place. Was that the only font they have? Where are the oth­ers? There’s no way for me to just browse fonts with­out mak­ing a deci­sion: serif, sans-serif, or script. I found this frus­trat­ing and disorienting.

      Pick­ing a font is a visual expe­ri­ence, and some­times you don’t even know the basic type of font you want. In my blog post, I used a black­let­ter font called Gre­go­rian for the titles. I didn’t seek out a black­let­ter font; I was seek­ing an attention-getting font, and it just hap­pened to be a blackletter.

      I have some ideas for your web­site, if you’ll per­mit. Of course, these are just my opin­ion, and I cer­tainly don’t want to dis­par­age your web­site. I think every web­site devoted to the font embed­ding move­ment is a gem and to be highly com­mended for their efforts to bring bet­ter typog­ra­phy to the web. Your site, in par­tic­u­lar, has an impres­sive tool for play­ing the fonts that you offer, allow­ing users to really see how the font plays with var­i­ous CSS prop­er­ties. This tool is much more than a lot of ser­vices are offer­ing right now.

      I think, and this is my per­sonal opin­ion, that your home­page should show off your hottest fonts, either cho­sen per­son­ally 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 pix­els to get a good sense for the font. I think the mixed-case alpha­bet works best for see­ing the range of glyphs that a font cov­ers. I’d also like to be able to browse all fonts, with options to fil­ter my brows­ing by var­i­ous font prop­er­ties. Also, I wouldn’t sep­a­rate pay fonts from free. Let the user choose their font first, and then decide if they want to pay for it. I’ve pur­chased a font more than once because I fell in love with it first and con­sid­ered the cost sec­ond. How­ever, if given the choice, I’ll browse a free selec­tion and ignore a paid selection.

      My last sug­ges­tion is actu­ally a tweak to one of the best fea­tures of your site: the sam­ple box. I love the fea­tures you’ve built into this tech­nol­ogy. I think it’s a great asset, giv­ing users a lot of options for tweak­ing. Per­haps you could make those options a lit­tle more user friendly. How about a select box for font size, with an option for typ­ing your own? Or sim­ply a slider? Color pick­ers on the font color and back­ground color are a must for any­one who doesn’t reg­u­larly use CSS. The other prop­er­ties, too, could ben­e­fit from slid­ers of some sort. All of these con­trols could have man­ual ver­sions as well for those who know what they want. It would make play­ing with the font a lit­tle eas­ier for non-technical users.

      In all, I think Kernest just needs to make dis­cov­er­ing its fonts a lit­tle eas­ier. Selec­tion is going to be a big player in this font game, and the eas­ier a user can browse your selec­tion, the bet­ter off you are.

      I’ve added @Kernest to my Twit­ter, and I’m excited to see how the site and ser­vice grows. Thanks for the comment!

Comments are closed.