Fonts, fabulous fonts: How to use the @font-face rule with popular font services

Studies show that five out of five web designers agree that the handful of fonts that come installed on most Windows and Mac computers offer a woefully inadequate choice for even the simplest design projects.

Stuffy old Times New Roman and straight-laced Arial have earned their place in the world of fonts, but anyone serious about design knows what it's like to spend hours searching for just the right font.

If you think font hunting a waste of time, you might consider reading Hear, All Ye People; Hearken, O Earth (Part One), a New York Times article by Errol Morris, who conducted a recent study on how typefaces impact our perception of truth. (Font fanatics, truth seekers, and anyone who loves a good research project should enjoy his article).

If you're already convinced that fonts matter and that you can never have enough options, you should be delighted that the @font-face CSS rule now makes it possible to use almost any font on your web pages.

Combine your new font options with other exciting CSS3 additions, such as text shadows and gradients, and you can create fantastic text treatments without resorting to the old workaround—using images with styled text created in Photoshop. (See Figure 1 for an example of the @font-face rule in action.)

Using text with the @font-face rule instead of text in an image offers many advantages:

• Text loads faster than images.
• Text formatted with HTML and CSS is easier to update than text in an image.
• Including keywords in text on a page instead of hiding them in images can improve your search engine rank.
• Using text in place of images makes your web pages more accessible to anyone with disabilities who uses a screen reader or other special browser.
• Text is selectable and resizable.

Using the @font-face rule seems pretty straight forward at first. In essence, it requires just two steps. First, you use the @font-face rule to link to a font hosted on a web server. Then, you use that font in the font-family property in your CSS rule. Easy peasy.

Armed with those basic instructions, it's tempting to assume you can just upload any font on your hard drive to your web server, link to it with the @font-face rule, and you're set. Unfortunately, like so many things on the web, hosting and using fonts in web pages is way more complicated than it should be—for more reasons than you might imagine.

First, font-designers have rights—not that I think there's anything wrong with that, it just complicates things. If you want to know more about the complexities of copyrighting fonts, and how at least one web designer has been already sued for generating a web font, read "Copyright and Web Fonts" from CopyHype.com.

Complicating matters further, even if you have the rights to host a font on your server, you may not have all of the variations of that font needed for the letters to display properly on Mac and Windows computers, or to work in all web browsers.

All these factors conspire to make hosting your own web fonts far more complicated than it should be, which is why most of us use one of the popular font services, such as Typekit, Font Squirrel, or Google Web Fonts.

But not all font services work the same way. Indeed, these three popular services take very different approaches to how they make fonts available to web designers. Font Squirrel lets you download fonts that you can then upload to your own web server (they manage the rights and font options for you). Google Web Fonts makes it easy to link to fonts hosted on their server. Typekit takes a very different approach, a more complicated approach, which I'll explain at the end of this article.

In my observation, much of the confusion among web designers about using the @font-face rule stems from the fact that the most popular font services take such different approaches to how they manage web fonts, and the steps you need to take to use their fonts in your web pages, which is why I cover each of them separately.

My goal in this tutorial is to first help you understand the range of options when it comes to font services, and then give you basic instructions for how to use each of them, so that you can make a more informed decision about which one will work best for you.

There are far more font services than I can cover in one article, so I've chosen to focus on Typekit, Font Squirrel, and Google Web Fonts because they are among the most popular options, and because they represent three distinct approaches to managing fonts on the web. Once you understand how these three services work, you should have a pretty good overview and be prepared to make an informed assessment of just about any of the other font services out there as well.

I'll start with Google's web fonts service, not because it's the best of the bunch, but because it's the easiest to use—and it's free. If you have a limited budget, and you don't need a vast collection of fonts to choose from, Google Web Fonts makes it easy to add a few new font options to your website.

There are a few limitations to keep in mind. Google's Web Fonts are all free fonts and very few offer more than one font style. If you want to use a variety of font styles, you'll be better served by Typekit or Font Squirrel.

Also, note that when you use Google's hosted font service, you are linking to the font on the Google server. Although Google's servers are pretty reliable, if their server goes down, your fancy fonts won't work and your text will display in a good old-fashioned default font instead.

To add any of the fonts in from the Google Web Fonts site to your pages:

1. Open a web browser and visit www.google.com/webfonts.
2. Click the big blue Start Choosing Fonts button (see Figure 2):

3. You can search through all of the fonts available on the site or use the Filters in the left column to narrow your search. If you don't like "Grumpy Wizards" or you want to see what your own words will look like in the selected font, you can change the text that is displayed in each font by editing the Preview Text field at the top of the screen (see Figure 3).

4. Find a font you like, and then click the Quick-use link in the bottom right corner, just below the font name.
5. Click the checkboxes next to each of the font styles that you want to use on your web page (see Figure 4).

Note: Most of the fonts in the Google Font Directory only have one style, but some have two or more. Although you may be tempted to choose all of the styles, it's best to select only the ones you'll use. As Google warns, the more font styles you choose, the longer it will take to download your page.

6. Scroll down the page and click the checkbox next to Latin (for English), or the box next to Latin Extended if you need the additional characters for another language.
7. Scroll further down the page to the blue box that has three tabs and choose the first tab to link the font to your website.
8. Google provides three options: Standard, @import, and JavaScript. Link is the simplest of these options. You find more detailed descriptions of the other two on the Google site.
9. Copy the link from Google just as you would copy and other text or code from a webpage (see Figure 5).

10. Open your web page in Dreamweaver, or any other text or HTML editor, and paste the link into the head area of your web page between the open <head> and close </head> tags.
11. Return to the Google Web Font site and, just a little further down the same page, copy the name of the font family.
12. Return to your web page and paste the name of the font family into the CSS rule where you want to use the font.
13. Apply the rule to text in your web page.
14. You can create tag, class, or ID styles that include the font you link to on Google. Just enter the name of the font in the style rule. In the example shown in Figure 6, I've used the font in a tag style for the <h1> heading tag and then used the <h1> tag to format the text.

Note: To view the font in Dreamweaver CS5 or CS6, you'll need to click the Live view button at the top of the workspace. Live view provides a preview display that uses the same WebKit engine used in Apple Safari and Google Chrome.

15. Final step: Publish the page to a web server and then preview the page in a web browser.

To confirm that the font works on your web page, it's always best to preview the page after it's published online. And don't forget, when you use Google's hosted font service, you are linking to the font on the Google server. If their server goes down, or anything else breaks the connection between your site and theirs, your text will not display in the Google font.

The newest member of the online font family is the Adobe Edge Web Fonts site. To create Edge Web Fonts, Adobe partnered with Google. As a result, Google Web Fonts and Edge Web Fonts are so similar, I won't cover the steps in detail here.

Like Google Web Fonts, Edge Web Fonts are both free and easy to use, and, in addition, the service is integrated into some Adobe tools. You can learn more about the service and Adobe's partnership with Google in the blog post Introducing Adobe Edge Web Fonts. While the service is powered by Typekit, meaning it uses the same standards-based method of serving fonts and the same global font serving network, it is completely free and requires no account or kit configuration (more on that in the Typekit section at the end of this article).

Although Google Web Fonts and Edge Web Fonts are similar, there are some reasons why you might choose one over the other. For example, they don't have all the same fonts, so if you don't find the font you want on Google Web Fonts, you may have better luck on Edge Web Fonts (and vice versa). Also, the two services offer different font loading options (see the Edge Web Fonts URL Specifications for how it works).

As with any new service (Adobe Edge Web Fonts was launched just weeks before I wrote this article), expect changes and improvements in the weeks and months to come. As part of their partnership, team members from Typekit, Adobe Type, and Google Web Fonts are all working together to improve rendering and performance across all of their font services.

Unlike the other two options covered in this article, FontSquirrel is not a hosted service. At Font Squirrel, you choose from a limited collection of free fonts, or you purchase one of their premium fonts. You then download the fonts from their site to your computer, and finally, you need to upload those fonts to a web server when you publish your website.
What Font Squirrel does is provide font kits, which are prepackaged font collections that include all of the font formats you need to use a font in a website, as well as the CSS and HTML code.
Font Squirrel also provides an @Font-Face Generator, which you can use to create all of the font formats needed on the web. Note: as I mentioned earlier, you must have the rights to use a font on a web server, and FontSquirrel reminds you of this requirement when you use the @Font-Face Generator.
Whether you download the prepackaged @font-face kits or use the generator to create your own, the steps you follow to use the fonts from Font Squirrel (and any other website from which you can download web fonts) are the same.

To use the @Font-Face kits from FontSquirrel in your website:

1. Open www.fontsquirrel.com in a browser and click the @font-face Kits  link in the navigation bar at the top of the site (see Figure 7).

2. Scroll through the @Font-Face Kits page and click the small Get Kit link (just under the name of any of the listed fonts) to instantly download the @font-face kit  (see Figure 8).

You can also search for the name of any font to open the Font Squirrel page for that font and download the @font-face kit from there. If you choose this option, make sure you click the button for the @font-face Kit and not just the TTF version (see Figure 9).

3. No matter how you download the @font-face kit, you need to expand the ZIP file that is downloaded to your computer. On a Mac, you can double-click the file name to unzip it. On Windows, right-click and choose Extract All.
4. If you're using Dreamweaver CS6, you can use the new Font Manager to add the fonts from your @font-face kits to your styles. The rest of the steps in this tutorial provide instructions for how to use the new Font Manager in Dreamweaver. Skip ahead to step 5, if you have Dreamweaver CS6.

   If you're using an earlier version of Dreamweaver, or any other text or HTML editor, copy the contents of the @font-face kit zip folder into your main website folder and use the following code examples as a guide to using the fonts in your pages.

   First, you need to link to the font. The @font-face kits from Font Squirrel include a collection of font types, so when you link to one of these fonts, the code in your header should include all of the font types, which means it should look like the following sample. (Of course, you should replace the name "Chantelli Antiqua" with the name of the font you downloaded. Make sure you copy the name exactly as it appears on Font Squirrel and in the filenames in the font folder.)

   }
   With the font linked in the header of the page, or in a style sheet liked to the header, you can then use the font in a style, such as this class style:
   .sectionName {
font-family: 'Chantelli Antiqua', Georgia, Times, serif;
font-weight: 400;
font-size: 150%;
color: #603;
}
Finally, format text in your page with the style:
   <p class="sectionName">Section 1</p>

5. If you have Dreamweaver CS6, you can let Dreamweaver do most of the work for you. Start by loading the font you downloaded into Dreamweaver with the new Web Font Manager by choosing Modify > Web Fonts.
6. In the Web Fonts Manager dialog, click the Add Font button to open the Add Web Font dialog box (See Figure 10).

7. In the Add Web Font dialog box, just to the right of EOT font field, click the small icon that looks like a file folder (the universally used Browse icon in Dreamweaver, which is also shown in Figure 10).
8. Navigate your hard drive to find the unzipped version of the @font-face kit folder that you downloaded from Font Squirrel, open the folder, click to select the EOT version of the font, and click Open. Dreamweaver automatically loads all four versions of the font into the Add Web Font dialog box when you select the EOT version (pretty cool, huh?).
9. Click OK to save and close the Add Web Font dialog box, then click Done to save and close the Web Fonts Manager dialog box.
10. After you load a web font into the Web Fonts Manager dialog box, it becomes available from the Font-Family list in the CSS Rule definition dialog box in Dreamweaver (see Figure 11).

11. After you create a style that uses your web font, you can use Dreamweaver's style features to apply the style just as you would any other style in Dreamweaver.

Remember: To view a web font in the design area in Dreamweaver, you have to click the Live view button at the top of the workspace (see Figure 12).

12. And finally, don't forget that when you use @font-face kits from Font Squirrel (or any other similar service) you need to upload the fonts when you upload your web file and CSS. When you use the Web Font Manager, Dreamweaver automatically creates a WebFonts folder and copies all of the font types into that subfolder within your Local Site folder. Make sure you upload the WebFonts folder and all of its contents so that your fonts will display on your website.

The new Web Font Manager in Dreamweaver is a handy feature that makes it easier to use Web fonts in styles in Dreamweaver; but keep in mind, you can only use the new Web Fonts Manager if you have the font on your local computer. If you use a font service, such as Google Web Fonts, covered earlier in this tutorial, or Typekit, covered in the next section, you can't use the Web Font Manager.

I've saved Typekit for the end of this article, not only because Adobe now owns it, but because I sincerely consider it the best of the bunch, and you're supposed to save the best for last. At the top of the heap, Typekit offers a wide range of professional-quality fonts, and now that Adobe has acquired Typekit, you can probably expect that it will become increasingly well integrated into the Adobe Creative Suite.
Indeed, Typekit is already included in all subscriptions to the Adobe Creative Cloud. If you're not a Creative Cloud subscriber, you can try Typekit for free, but if you get much traffic, or want to use fonts on more than one website, you'll have to pay a monthly subscription fee.
Before I get into how Typekit works, here's a quick recap of what I've covered in this tutorial so far: Google and Font Squirrel represent two very different ways to work with web fonts using the @font-face rule:

1. Download a font to your computer and then host that font on your own web server when you publish your web pages (that's the Font Squirrel model).
2. Link to fonts hosted on someone else's server (that's the Google Web Fonts model).

Now I'm going to show you a third approach as I explain how to use the fonts at Typekit.

3. With Adobe Typekit, you set up an account on the typekit.com website and create a collection of the fonts you want to use on your website. Then you simply use those fonts in your styles, and when you publish your web pages to the URL you specified in your typekit.com account, your Typekit fonts automatically—and seemingly magically—appear on your web pages.

Here's a step-by-step look at how Typekit works:

1. Set up an account at typekit.com (see Figure 13).

2. Browse through the Font Library or search for specific fonts. You can even set up a list of your favorite fonts as you browse (see Figure 14).

3. When you find a font you want to use, click the green bar at the bottom of the font icon, and then choose Add to Kit (see Figure 15).

4. When you add a font to a Kit at Typekit, there are a few steps involved, including choosing which weights and styles you want to make available. Rather than try to explain all of these options (which may change over time), let me just suggest you read (and follow) the instructions in the Typekit editor very carefully.

   Remember: The more font style options you choose, the more font styles have to be accessed on the Typekit server and the slower your web page will download in a web browser.

5. After you specify all of the options you want in the Typekit editor, make sure you click the big green Publish button in the bottom right-hand corner (see Figure 16). Your Typekit fonts will not display on your web pages until they are published.

6. Finally, you need to copy a little JavaScript from the Typekit website and insert it into the top of the pages of your website where you want to use your Typekit fonts. To find the embed code on the Typekit site, click the Launch Kit Editor button (the green button shown in the top right corner of Figure 17.) In the Typekit editor, click the Embed Code link to launch a window with the JavaScript code.
7. In the code on your own website, you want to paste the embed code you copy from Typekit into the top of the code in your web pages between the open <head> and close </head> tags. Typekit recommends you insert this code toward the top of the head area for best results.

   Note: Because the Typekit model is so different from the other two, here's a quick summary to help you compare how these three sites work. With Font Squirrel, you download the fonts to your computer and then publish them to your server. With Google Web Fonts, you link to the fonts hosted on a Google Server. With Typekit, you essentially use a little JavaScript to create a connection between your site and theirs and then the fonts that are in your collection on Typekit become available for use on the pages on your website.

8. After you've set up your website on Typekit, set up your Font Kit, published the fonts you want on Typekit, and copied the embed code into your web pages, you're ready to go. Any fonts in your kit on Typekit become available automatically. To use them, simply include the name of any of the fonts from your Font Kit in your styles.

A few of last tips for making the most of Typekit:

• Make sure you enter the font name in your style definitions exactly as it appears on Typekit.
• Remember, your fonts will only display on URLs included at Typekit. That means you have to publish your pages on the web before these fonts will be visible at your URL. If you want to preview Typekit fonts on your local computer, you can specify localhost as one of your URLs when you set up your Kit, and then they should display on your local computer, as well as the URL of your website.
• There are different levels of service at Typekit. If you manage more than one website, you need to set up a Font Kit for each site separately. You can manage up to two URLS for free, and if you pay for an account, you can manage many websites with one login.
• If the vast collection of fonts at Typeit isn't enough for you, you can license more from their partners (see Figure 18).

To learn more about how the @font-face rule works, the evolution of fonts on the web, and how fonts display, read Introduction to web typography and @font-face by Typekit Founder Greg Veen.