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
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.
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.
1 |
|
2 |
<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script> |
3 |
<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!
