Stunning CSS3
A Project-based Guide to the Latest in CSS
Font-embedding Services
This article is an excerpt from Chapter 3 of the book Stunning CSS3: A Project-based Guide to the Latest in CSS, but is kept continually updated. It was last updated in November 2012.
For more updated articles from the book, go to Resources. You can also learn more about the book and download sample chapters.
All the sources I listed for @font-face
-ready fonts are places where you can download fonts to host on your own servers and then do the coding yourself. Another option is to let others do all this work for you using a font-embedding service, also called a type delivery service or font hosting and obfuscation service (FHOS).
These services offer a collection of fonts that their distributors have approved for web use through the service, getting around the licensing issues of @font-face
. These fonts are hosted by the service, making them difficult or impossible to download and redistribute.
Font-embedding services are easy to use because they provide all the different font file formats needed for different browsers, as well as the code for you to add the fonts to your sites. This code may include JavaScript in addition to CSS in order to make the real fonts impossible to reuse or speed up their rendering. Most of these services are not free, though some have free options, and the pricing models vary, such as subscribing to a collection or paying per font and per site.
These services are popping up all over the place—many type vendors are creating their own services for their fonts only—but here are the major players:
- Typekit is a subscription-based service where you pay yearly for access to a collection of fonts, which come from multiple foundries. The smallest collection is free, but has other use restrictions.
- Fontdeck is a subscription-based service, but you pay for each font you want per year and per site, instead of paying a yearly fee for a collection of fonts. The fonts come from multiple foundries.
- Kernest has a subscription model similar to Fontdeck, but nearly all of the fonts are free. The fonts come from multiple foundries. Some are hosted by Kernest, and most you can download and host yourself.
- Google Web Fonts is a free service with no subscription required. The fonts come from multiple foundries, and all are open source. You also have the option to download the fonts and host them yourself instead of using the service.
- Adobe Edge Web Fonts is a free service with no subscription required. It's being integrated into some of Adobe's web design and authoring software. The fonts come from multiple foundries, including Adobe itself.
- Ascender offers two services: Web Fonts from Ascender and FontsLive. Both have a subscription model similar to Fontdeck, and the fonts come from multiple foundries.
- WebINK has a subscription model similar to Typekit, but you pay a monthly fee based on the fonts' pricing tier and your bandwidth usage. The fonts come from multiple foundries.
- Webtype has a subscription model similar to Fontdeck, but pricing varies based on the bandwidth you use. The fonts come from multiple foundries. You can also purchase traditional versions of the fonts to download and use on your desktop.
- Typotheque offers a service for fonts from only its foundry, where you pay a one-time fee per font.
- Just Another Foundry also offers a service for fonts from only its foundry, but you pay a yearly subscription fee.
- Fonts.com Web Fonts has a subscription model similar to Typekit, but you pay monthly. The highest-priced plan allows you to also download fonts to use on your desktop, but you can use the installed font only so long as it's being used in a web site through their service.
If you’re thinking about using one of these services, read and use the list of buyer considerations at the end of the article “Web Fonts at the Crossing” before choosing.