Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
One of the biggest reasons behind the recent explosion in the adoption of web fonts has been the emergence of so many different font hosting services. These services allow you to use web fonts on your site without worrying about licensing issues or complicated cross-browser scripting. Many of them offer additional tools to help control font loading, compare font rendering across platforms and browsers, and to provide robust fallback options for non-supporting devices. As you can imagine, in a field as new as web font hosting a wide variety of business models and services have evolved.
In this movie, I want to compare some of the more popular font hosting services by providing a brief overview of their capabilities and service plans. Although there are certainly multiple variations, they can be loosely organized into three distinct categories. Subscription-based services, font-licensing services, and open source hosting solutions. Let's take a look at some of the subscription-based services first. The most popular font hosting service at the moment is Typekit. Typekit is a subscription-based service with affordable pricing plans and access to over 4000 high-quality fonts from some of the biggest foundries.
Typekit also boasts an impressive set of tools to assist you in choosing fonts, such as a detailed type specimen page, a test drive page that lets you set your own type in the font, and a browser comparison page that offers screenshots of the font in multiple browsers and platforms. The subscription plans are tiered by page views, web sites, and the number of fonts allowed per site. Costs are per year and are among the cheapest plans of any font hosting service. Once you've signed up, you build kits for each of the domains that you'll be using Typekit on.
You will browse through the fonts and add the fonts you want to use for each kit. When your kits are finished, Typekit will give you a few lines of code to add to your site and you're up and running. For those that want a little bit more control, Typekit does offer a few advanced tools to let you have greater control over your font stacks and how styles are applied. Monotype Imaging recently launched the awkwardly named Fonts.com Web Fonts service. This service offers access to over 8000 fonts and features exclusive access to fonts like Helvetica and Universe.
Browsing through the massive list of fonts is pretty easy, as you can search by font type, designer, foundry, or language. Each font specimen page allows you to experiment with the font at different sizes, text, and color so that you can make sure it's going to fit within your site. Pricing plans are based on a per month price with free, standard, and professional plans available as of this recording. The professional plan is pricey, but it allows you to download and install 50 fonts per month to your Desktop.
The Fonts.com Web Fonts service works much the same way as Typekit does. You create a project for each site, assign fonts to the project, tell it which selectors will use the fonts, and then use the generated code in your site to access those fonts. If you want a little more control, you can build your own font stacks using the service. In terms of font number and quality, Fonts.com is hard to beat. Right now, their documentation and tools are a little bit behind Typekit, but it's a fairly new service and I'm curious to see how they're going to evolve it over time.
While Typekit and Fonts.com web fonts allow you access any and all fonts in their library as long as you're a subscriber, other sites feature subscription based on single font usage, meaning that you only pay for the fonts that you use. While this could be less expensive for sites that are only going to use one or two fonts, it can quickly add up if your needs grow. Most of those plans have pricing points that account for bandwidth usage and the number of domains that the font will be used for. Here are some of the more popular single license subscription services available.
FontsLive is Ascender's web font hosting solution and offers a selection of fonts from Ascender and some of its partners that have been specifically tuned for on-screen usage. Fonts start at $10 a year and a self hosting service is offered for enterprise-level clients. The interface is clean but you actually need to select the font to determine the subscription price. Since the pricing varies widely between the number of fonts and the number of users per month, this can be a little bit frustrating. Fontdeck is a service created by ClearLeft and OmniTI.
It features over 600 high-quality fonts from a wide variety of foundries. You only pay for the fonts you want to use and there are no bandwidth limits included in the pricing plans. Pricing is pretty straightforward, although it does vary based on the font that you choose and it can get rather expensive if you need to use a family with a wide variety of styles as you'll pay for each one. One really cool feature about Fontdeck is that you can try any font from the library for free with no time limitations on usage. Up to 20 unique IP addresses may view the font, allowing your design team to preview a font selection.
Once you decided to go live with the font, you just purchase the upgrade and the font is served without any additional steps. One downside is that there's no self hosting or downloadable options available for any of the fonts. WebINK is Extensis's entry into the web fonts hosting marketplace. WebINK features a monthly subscription pricing model based on the individual fonts that you'll use. The pricing system uses a confusing mixture of service plans based on monthly bandwidth and font tiers that make it difficult to calculate exactly how much a font is going to cost before you select it.
Like many other services, once you sign up you create a type drawer, select your fonts and generate the CSS to using your page. There are over 2000 fonts to choose from and in a really cool feature, WebINK integrates with Suitcase Fusion 3, giving you the option of controlling the fonts from your Desktop. Webtype is brought to you by a consortium of font professionals, such as the Font Bureau, Ascender, and others. Fonts are available on an annual subscription based on the font selected and the monthly bandwidth used.
While their font library isn't as large as some of their competitors, all of the fonts are extremely high-quality and the font browsing option includes a size recommendation to help you choose fonts based on how you intend to use them. In addition to these subscription- based models, several web sites sell fonts specifically designed for the web or with licensing agreements specifically allowing for use with @font-face. If you're looking for total control over your fonts and no recurring fees, these solutions might be for you.
Fontspring offers a huge selection of fonts for sale from a wide variety of foundries. The pricing varies widely by font but once you've purchased one, you can download it and start using it right away. The beauty of Fontspring is that almost all of the fonts have an option for an @font-face license. If purchased, you'll receive multiple versions of that font that are optimized for the web and designed to target all modern browsers. It's up to you to host the fonts. Although the service does generate the CSS for you use the fonts on your site. Some minor tweaking of the code, uploading your fonts, and that's all you really need to do to get started.
Although the one-time price is almost assuredly more than this subscription based services, it's just that, one time. Once you've purchased the appropriate license you can use the font as often as you'd like. FontShop is an independent online type retailer that recently added a Web Font Fonts, and yeah that's what they named it, category to their existing offerings. Much like Fontspring you make a one- time purchase and then are free to use the font as often as you like within the license agreement. Purchasing a font will give you access to an EOT and a WOFF version of a font, which you can then self host.
They've also partnered with Typekit and will allow you to take advantage of Typekit's hosting service by setting up a free account for you to serve your FontShop fonts. This allows you to add support for Webkit browsers without requiring any extra work on your part. Typotheque is a graphic design studio and font foundry and was one of the first foundries to offer support for web fonts. They differ from other services in that they sell two tiers of Web licenses. The web font license gives you access to the font hosted through their servers.
The fonts all have open licenses that allow you to use them as often as you'd like and without any bandwidth restrictions. Right now, the font library is rather small but given Google's track record this is a service you want to keep your eye on. Kernest is a service that is really hard to categorize. They offer a range of fonts from free open-source fonts to fonts with minimal license purchases. You either self-host the fonts or use their open source font server engine. The font selection is quite large over 2000 fonts.
But the quality does vary a bit. So you want to test thoroughly before committing to a specific font. Any purchased fonts are a one-time fee only. The service is incredibly easy to use. You simply pick a font and then copy and paste the link and the CSS into your own files. All this without requiring an account. Be careful when selecting fonts however. The font licenses do vary. You want to make sure that you're going to pick a font that has a license to match how you intend to use it. TypeFront is another service that defies easy categorization.
This service offers no fonts of their own. Rather you sign up for a hosting plan and then upload your own fonts to their server. They then generate the multiple font formats required and the code necessary to display your fonts. Since you are uploading your own fonts, you're responsible for making sure that you have the necessary license to use those fonts on your site. The hosting plans are relatively inexpensive and it takes a lot of the grunt work off your plate, allowing you to focus on design. Okay, now I know we've covered a lot of ground here, but honestly that's just some of the font hosting services available to you.
For more details on the services that I've mentioned here, visit their sites, read more about them, and take a moment to try them out. Almost all of the services have some type of free or trial account that will allow you to try out multiple services before you find the one that is right for you. With that in mind, we're going to discuss some of the things that you need to consider when choosing a font hosting service in our next movie.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.