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.
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.
However, Typekit has one significant advantage by using a script rather than plain old CSS - the
Ode to the
The classes are
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.
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.
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.)
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.
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.
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!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post