*** From the Archives ***

This article is from October 10, 2011, and is no longer current.

What You Need to Know About Webfonts: Part 2

The best estimate I’ve come up with is that there are around 150,000 digital fonts, at least for print design. You might think that as long as you can convert them to the proper file formats, then you can use any of those fonts in your Web designs. However, there are actually only about 40,000 you can use legally in Web designs.
An End User License Agreement (EULA) is the agreement you make on what you can legally do (and not do) with a particular piece of software — in this case, a font file. While it would be nice to think that this is just a formality, most fonts do not explicitly allow you to download the font for use on a webpage with the @font-face rule, and, unless it’s explicitly stated, then it is implicitly illegal. Put another way, if your font file is not licensed for webfont use, then you are breaking the law if you do so. Some will argue that this is similar to downloading music or movies without paying for them, but that’s illegal too. It doesn’t matter how easy it is to do — you’re still breaking the law.
I’ll leave it up to your own conscience as to whether you think this is acceptable, but keep in mind that type designers spend months and often years developing a really good typeface. It’s their intellectual property, and they deserve to be rewarded for their hard work.
Three Sources for Webfonts
There are three primary sources for fonts you can use on the Web legally:
1. Conversion. You can take a font file that you own or created and use a tool like FontSquirrel’s @font-face Generator to convert one file to all of the different formats you need to ensure full cross-browser support.
Pros: Free. When you are choosing which method you want to use, it’s important to keep in mind that conversion and purchasing from retailers means that the font is yours, and under your control. You serve it from your own web server, and have maximum control.
Cons: Unless you created the font, you may not have the legal right to make this conversion.
2. Retailers. There are a growing number of websites that sell font files intended for the Web, generally including all of the necessary formats. There are also free sources.
Pros: The font is yours; you serve it from your own web server, use it on as many sites as you wish, and have maximum control.
Figure 1. When the font is yours, you maintain control.

Cons: You have to pay for the font. You need to understand the technical intricacies of uploading fonts onto your own web server. You have to be aware of the cross-domain issues that affects
3. Web Font Service Bureaus (WFSB). You never actually own the fonts, nor do you have direct control over the files. Instead, you pay a licensing fee and then point to the font files on the WFSB’s server. Some WFSBs use the @font-face rule for adding fonts, but more often you will indirectly reference the file through a linked CSS file or even using JavaScript. More on that later.
Pros: You don’t have to upload the fonts or worry about updates and cross-domain issues. You know the font files are legal. It can also reduce the strain on your server because you’re not delivering the files. These are usually high-quality fonts.
Figure 2. When you lease a font, you can relax and leave the heavy lifting to your selected Web Font Service Bureaus.

Cons: You give up direct control over the file. Pricing structure is complex and hard to compare between WFSBs. Most WFSBs don’t provide copies of the fonts for you to install on your own computer, meaning that if you need to create visual comps in Photoshop, for example, you must buy a separate license for the local copy.
What to Look for In a Webfont Source
Your primary concern is to find a webfont retailer or WFSB that provides the proper formats to support all of the browsers: EOT, WOFF, and either TTF or OTF formats. Some services also include the SVG format, but, as explained in Part 1 of this series, I don’t recommend SVG.
Obviously, the source you choose must have the font or fonts that meet your needs. For example, if your style guide requires the use of a specific typeface, it’s you can immediately rule out any WFSB that doesn’t have that typeface.
You should also find out whether the webfont source solves the problem with Firefox cross-domain incompatibility. (See the warning in “What You Need to Know About Webfonts: Part 1”). This is an issue where Firefox won’t display webfonts coming from a server other than the one that the summoning Web page is on. All WFSBs I’ve listed in this article won’t have this problem, but it’s something to keep on an eye for newer services.
Beyond those criteria, consider the following questions when evaluating potential font suppliers.

  • How many webfonts are available? Make sure the fonts include the ability to use with the @font-face rule. Remember, unless it states so explicitly, the font is not legal as a webfont.
  • What code is used to embed the fonts? Web fonts are embedded using the @font-face rule; WFSBs will often have you use a link to an external CSS file or even JavaScript to add the code.
  • Can you use the font locally to create visual comps and style guides? Many Web designs start life as visual comps, created in an application like Photoshop or FireWorks. However, without a local version of the font, you can’t design comps with webfonts.
  • Are the fonts optimized for the screen? Most fonts were designed for print, not for screen display. Although technologies are rapidly advancing to the point that screen resolution will rival print (around 300dpi), most people still view text on a screen with only 72ppi. Many fonts need to be tweaked to look their best at this comparatively low resolution.
  • Can you subset the font? One way to reduce a font file size is to eliminate glyphs that you don’t need. For example, if your website will only be displayed in English, but your font includes letters for French, Spanish, German, and Russian, you can take out characters used for those other languages. That can radically reduce file size and thus improve display speed.
  • Can the font be compressed? EOT, OTF, and TTF font files can be Gzipped to drastically reduce file size — thus reducing the download time — with no impact on quality. (WOFF has built-in compression, so no additional compression is needed.)
  • Are there limitations on amount of usage? Many services charge rates based on bandwidth usage or page views. Calculate your usage to find the best plan for your needs.
  • What is the cost? Although often based on usage, cost rates vary greatly from service to service, and none use the same rates.

Converting Fonts
To reiterate: If not explicitly stated in the license that came with the font that it’s legal to convert, then it’s not. When in doubt, you can check with the license owner, generally available from the Get Info window in programs such as Apple’s FontBook and Extensis Suitcase.
Figure 3. Font information shown in Apple FontBook.

The actual font conversion is relatively easy. Although there are various tools for converting fonts between formats, the easiest and most versatile is the @font-face Generator provided at FontSquirrel.
Figure 4. The FontSquirrel @font-face Generator.

To use the FontSquirrel @font-face Generator on a website that allows you to upload TTF or OTF files, choose from a number of customization options, including:

  • Basic: Converts the font files with no frills.
  • Optimal: Applies optimization features to improve the quality and speed of the font.
  • Expert: Gives you complete control of the conversion, including format, CSS code syntax, font subsetting, open type options, and PostScript hinting, to a name a few.

Regardless of which option you choose, the final box asks you to confirm that the font is “legally eligible for web font embedding.” You have to check it to continue, but any liability is on your shoulders.
Figure 5. Make sure to check that the fonts you are converting are legal for street use.

FontSquirrel constantly updates and refines its @font-face Generator, but the company provides excellent documentation on updates and how to use their product.
Buying Webfonts From Retailers, Plus Free Fonts
The obvious advantage of buying fonts is that you pay for the file once, then they’re yours to use as you wish. Well, almost. When you buy fonts or download them for free, the font file is yours and you can deploy it however you see fit within the confines of the end user license agreement. This is not unlike buying a DVD. Most of us think of the DVD as being our property, to do with as we please. However, if you read the fine print more carefully, there are generally many things you cannot do with the video, such as show it to groups over a certain size, or copy and resell it. Font licenses may have similar restrictions.
Most fonts you buy or download for free, though, have few restrictions: don’t resell them, don’t let other people use them without buying their own license, and in some cases, don’t use them as webfonts.
When purchasing fonts for web usage, look for sites that clearly mark whether a font is licensed to be used with @font-face. Many use a clear label or icon, but on some you’ll need to dig a little deeper.
Figure 6. Sites where you can purchase webfonts or download them for free. Click the figure below to see a larger version.

And since you install these fonts on your computer, you can use them in Photoshop or Fireworks to create visual comps.
“Leasing” Fonts from Web Font Service Bureaus (WFSBs)
Using a Web Font Service Bureau can take a lot of the pain out of webfonts, especially if you’re less technically inclined. Although you don’t have direct control over the font files, this means you never have the hassle of uploading them, no worries about the license, it reduces your server load, and chances are very good that the quality will be high.
On the downside, most WFSBs don’t provide copies you can use on your computer, meaning that if you need to create visual comps, you have to buy a separate license for the local copy. WebInk has released an interesting feature recently, though, to help address this issue for their fonts. They’ve created a plug-in for Photoshop that lets you use their fonts (and there are thousands in a visual comp for free, even if you aren’t using the WebInk service. This means you can play around with different typefaces in your designs without paying for them.
Different WFSBs use different methods for embedding the font. Here are the ways they handle the @font-face code:

    • @font-face (@ff): Allows you to add the @font-face value to your code directly. This is the preferred method, since it gives you the most control over the code, allowing you to specify what the font-family name will be in your code.
    • Link (<link>): Uses a link to an external CSS file located on the WFSBs server. This works well but means that you can’t name the font yourself and will have to use the font-family name dictated by the WFSB. As I explained in a previous article, though, it’s a best practice to name the font based on use rather than the actual font-name.
    • JavaScript (<js>): Uses an external JavaScript to embed the font-file. This is done mostly as a way to keep the font files safe from being illicitly downloaded by the end user, but it can also allow for customization on the fly. However, if the end user has JavaScript turned off then you’re out of luck and your understudy fonts will be used.

The other vexing issue with WFSBs is that no two have the same bandwidth allowance or cost structure, making comparisons difficult. Obviously, one criteria is whether the WFSB has the fonts you want to use. Beyond that, you want to carefully consider the long-term costs of each service. Most services will send you a reminder when it’s time to renew the license, but make sure that you’ve accounted for the license going away by including understudy fonts that will take their place if something happens. And if you’re purchasing for a client, consider how easy — or difficult — it could be to transfer a license to your client after you purchase it.
Figure 7. Sites where you can license fonts for use on your website. Click the figure below to see a larger version. Note that Typekit was acquired by Adobe last week.

Now you know where to find webfonts. In Part 3 of the series, I’ll show you how to choose the best webfonts.