Advertisement
Typography

Web Font Services: the Good, the Bad, and the Ugly

by

In this article we'll be taking a look at a few of the most popular web font services, comparing features between them and talking about some of the red flags involved with working with real fonts on the web.

We're a lucky bunch, we web designers of the present. The web designers of yesteryear have long struggled with a frustratingly small selection of fonts - the web-safe system fonts that were tried and tested for screen use. You know their names. Georgia, Times New Roman, Arial, Verdana - nearly all of them send a slight shudder down our spines.

But not any more. The web font is here! CSS3 has brought real web fonts to our utility belt, with the power of @font-face. But with this new technology comes an overwhelming responsibility - the headache that is licensing fonts for use on the web. More and more foundries are supplying fonts with license for online use, but then hosting the fonts yourself and ensuring compatibility across devices and browsers can be another world of pain on its own.

That's where web font services come in. They handle the bulk of the licensing and hosting work, leaving you to do what you do best - build amazing and beautiful websites.


The Technology

I'll be talking about three of the most popular web font services here. Namely, Typekit

Fontdeck

and Google Web Fonts.

All these services host your fonts on their own servers, and manage all of the licensing nonsense that goes with them - so you can just plug and play with no worries.

These services don't all use the same technique for embedding fonts. Fontdeck and Google Web Fonts both allow you to use a tag to grab the fonts directly in order to use them on your site, whereas Typekit has a different approach. Typekit requires you to include a snippet of JavaScript in your site which grabs the necessary resources for you upon execution.

Using a tag has a couple of obvious benefits. For one thing, this method doesn't require the user to have JavaScript enabled. Additionally, the script that Typekit's code generates will result in at least 2 additional http requests - one for another script, and a second for the CSS file grabbed by said script. This is something that Fontdeck and Google don't have to suffer through.

However, Typekit has one significant advantage by using a script rather than plain old CSS - the wf-* classes.

Ode to the wf-* classes

When your site requests fonts from Typekit's servers via their JavaScript code, something slightly wonderful happens - the script will add classes to the html element of your site, depending on the status of the request for fonts.

The classes are wf-loading, wf-active, and wf-inactive. What does this mean for us? Well, these classes can help us to prevent FOUT - the flash of unstyled text that appears as our web fonts are loading. By styling our pages appropriately when the fonts are loading, we can prevent the jarring effect that FOUT can have for our user. Check this page for an example - while the fonts are loading, a class of wf-loading is applied to the html tag.

Using CSS, we can hide all of the content and display a loading animation to make it clear to the user that something is happening. Once the fonts have finished loading, we can gradually fade our content back into view. Google Web Fonts also allows you to use a script if you'd like the advantage of these classes. In fact, the script behind these classes was a collaborative effort between Google and Typekit.


The Costs

Each of these services adopts a different pricing model. Google Web Fonts is completely free. You can even download the fonts for local use on your computers, which is great if you're trying to build consistent branding with typography.

Typekit has several different pricing tiers, ranging from a free plan to $99 a year. The free plan has a limited number of fonts, allowed on only one website, and requires you to display a Typekit badge on your website. All the paid plans allow you to remove this badge, and allow you to use create more websites and use more fonts the more you pay. For more information about their pricing plans, check their website.

Fontdeck adopt a different pricing method. They charge on a per-font basis, with fonts (at time of writing) ranging in price from $2.50 a year upwards, but typically costing around $7.50 a year.


The Ugly

One major concern when using web fonts is how they appear across the vast variety of devices, browsers, and platforms. Unfortunately, there's no way to ensure our websites will look exactly the same on one device as they do on another - we know that's OK though. Still, we could do with some reassurance about how well the fonts will render.

Luckily, our web font services know this is a big deal. They all provide screenshots of how the font renders in all the popular browsers, including IE6 and up, Google Chrome, Safari, Firefox, and Opera. Generally speaking, web fonts render just fine in all cases. Some lighter faces might appear jagged in Windows, but that's just down to the Windows font rendering engine - not much we can do there.


Courtesy of Type rendering on the web from Typekit

One thing to be aware of when using web fonts in your sites is the CSS text-rendering property. This property allows you to employ OpenType features such as ligatures and kerning, but at a big cost. In WebKit browsers on Linux distributions, and in Chrome on Windows with some fonts, using this property can result in some strange side effects when dealing with inline text elements.

With this in mind, it's probably a good idea to steer clear of this (currently experimental) property. Plus on the bright side, Firefox not only implements the property correctly, but has ligatures and kerning enabled by default, too.


Using the Services

So, we know about the different services and the differences between how they work, as well as some of the red flags involved in using web fonts on our sites - but how do we actually get started using them?

One particularly handy tool for getting your hands dirty with web fonts is Typecast.

Typecast provides a way for you to test out all of the web fonts available from all of these services in a real-web environment, where you can also add custom CSS, define widths for elements - the whole kit and caboodle. The CSS that Typecast produces for use on your own site is less than desirable - font sizes, line heights, and margins set in pixels, not ems. But it's still an incredibly useful tool for seeing how these fonts will look on the real web.

If you find yourself lacking inspiration for how to use web fonts, the Typekit blog is always chock-a-block with inspirational sites, as well as some fascinating insights into the technology behind web fonts. There are also websites like the Lost World's Fairs, Just My Type (from yours truly), and Good Web Fonts where you can see the true power and beauty of real fonts on the web. Elliot Jay Stocks' website is always a truly inspiring website that showcases web fonts, too. (You might be able to tell - I love this stuff.)

When it comes to actually using the services, they couldn't be simpler. Google Web Fonts is very much just plug and play - find a font you like, click 'quick-use', and then select the fonts & variations you require. You'll get a link you can use in your website's or in your CSS file via @import, or a javascript snippet you can use to take advantage of the "wf-*" classes.

Fontdeck allows you to test out the font on a few computers before purchasing it for widespread use on your website. Simply select the font you like, and they'll give you a link you can use in the websites. Test it out on a few computers by adding their IP addresses to the site on Fontdeck, then once you're happy with it, simply purchase the font for unlimited use.

Typekit has a free plan that allows you to use a fairly extensive library of fonts for free, under the condition that you display a badge on your site that advertises the fact you're using Typekit. It's actually not a bad looking little badge, but if you want it gone, you'll have to pay for a plan.

The Portfolio plan is incredibly extensive, with few limitations, and it's priced at a reasonable $49.99 per year, or if you have Adobe Creative Cloud, you get the Portfolio plan included. To use Typekit on your site, you simply create a "kit" - a colleciton of fonts for use on domains that you specify. Copy the javascript snippet to your websites, add some fonts to the kit, select the weights and variations you require, then remember to hit 'publish kit'. Sometimes Typekit's servers can take a while to reflect changes, so give it a few minutes before refreshing your site.

Since July 2012 Typekit have offered improved JavaScript embedding.

<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

This new embedding method boosts performance, offers Protocol relative URLs and optional (official) asynchronous loading. Asynchronous loading allows fonts to be pulled into a page, without blocking the queue for other assets should problems arise.


Conclusion

With any luck you're now armed with enough information about web font services to dive in and make up your own mind. Which of these systems and features do you prefer? Do you have experience with any of the services? Advice and pointers you'd like to share? Let us know in the comments!

Related Posts
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Design Theory
    CSS3, Web Fonts and IconsDsfd webfonts retina
    We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.Read More…
  • Web Design
    Typography
    Figuring Out @font-faceF preview
    Within the last five years, typography on the web has taken quite an about face (sorry, pun intended). It used to be that web designers were constrained to using web-safe fonts only; system fonts available on all users' computers. As you can imagine (or experienced first-hand), this was frustrating to us type freaks, but we dealt with it. However, in a weird way it was kind of nice because you had a limited set of fonts to choose from, so the time spent picking the perfect font was minimal (I’m not complaining). Now though, a font specific to the look and feel you want to achieve is possible, and companies can now project their visual brand language through typography.Read More…
  • Web Design
    Typography
    H&FJ Web Fonts: A Field GuideHfj retina
    Since Hoefler & Frere-Jones announced their foray into the world of web fonts, the internet has been overflowing with the rejoicing of designers and typographers everywhere. Finally, one of the most popular type foundries out there has released their long-awaited competitor to the web font services of late!Read More…