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

by on March 23, 2010

in L&S, Websites

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.

 

{ 9 comments… read them below or add one }

Ethan Dunham March 24, 2010 at 11:52 am

I am the guy behind both Font Squirrel and Fontspring. I appreciate the writeup and kind words. I would like to correct you though on Fontspring. It is not at all like Typekit or Typotheque or Fontdeck. It is not a hosted service. You purchase and download webfonts and install/host them yourself. Almost 99.9% of our fonts offer an unlimited domains license for a 30% surcharge. This gives the designer great freedom in implementing the fonts. Obviously Font Squirrel hits a sweet spot for web devs, which is why we wanted to do the same thing with commercial fonts. We think that the “owning” rather than the “renting” model is the way to go.

Miles Rausch | Interactive Programmer March 24, 2010 at 12:12 pm

@Ethan: I apologize for the misunderstanding. I didn’t get a chance to fully test FontSpring, and I see now that your license clearly spells out that the fonts are installed by the licensee. I’ve updated the post to reflect this update.

Ethan Dunham March 24, 2010 at 12:41 pm

@Miles – Thanks!

Peter French | Internet Support Technician March 24, 2010 at 1:31 pm

I’ll have to try these out in my next project. Nice write up Miles!

Rob March 24, 2010 at 2:20 pm

May I just plug our own offering?

http://www.font-face.com

currently we’re not up and running, but we are getting very close now.

We will be offering free fonts for use with @font-face but they will also be hosted by us. Free? Yep. No catch.

They will be hosted by us, so we can take advantage of caching to make them super fast to load.

Check out our holding page for more info. And sign up for updates. If you do, you’ll get straight on the beta test list.

Miles Rausch | Interactive Programmer March 24, 2010 at 2:29 pm

@Rob: I’ll check it out. Always good to have more tools in the toolbox. I’m signed up and eager to learn more!

Ben Overmyer March 25, 2010 at 5:01 pm

The rise of @font-face and similar technologies has definitely been a boon for web typography. Interest in such things as vertical rhythm and kerning has skyrocketed in the past couple years, and that’s a wonderful, wonderful thing.

I only hope that we keep pushing for better adoption and adaptation of print techniques for the web.

Peter Boyle February 28, 2011 at 11:37 am

Great post! I’m glad to see the war on embedding fonts is (potentially) coming to an end.

I’m sorry you and Verdana have had a falling out. Have you met Trebuchet MS? She’s a nice font and she doesn’t get around much.

Miles Rausch | Interactive Programmer March 2, 2011 at 9:26 am

@Peter: I’ve had my trysts with Trebuchet MS, but maybe it’s time to look her up, again. Thanks for the comment!

Leave a Comment

Previous post:

Next post:

 
 

Locations

Sioux Falls Agency Office map

Sioux Falls Agency Office

3932 South Willow Avenue Sioux Falls, SD 57105
605.338.8000
Find us on Google+
Sioux Falls Call Center Office map

Sioux Falls Call Center Office

3817 South Elmwood Avenue Sioux Falls, SD 57105
605.978.2000
Customer Care

Careers & Internships

If you are dedicated, driven and ready for an advertising career with real potential, we want to hear from you.

Current Open Positions

 
Request Info
RSS
Twitter Facebook LinkedIn YouTube Follow
Was this information helpful?