O'Reilly logo

Responsive Typography by Jason Pamental

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 4. Buy or Borrow: The Designer’s Dilemma

When it comes to actually utilizing @font-face to embed fonts on your site, you have some choices to make. Mainly, the choice is between self-hosting (where you serve the files along with the rest of your site) or using some sort of service. Each choice has its benefits, but there are some significant differences, so it pays to do your homework. Know what you want and what your project requires in terms of platform support, traffic levels, and typographic features, so you can be sure to make the right choice. It seems that most type vendors support one or both options these days, and even if you don’t see pricing for the option you want on the website, it often pays to send an email and just ask. You may be surprised at the answer. Each of these options has a cost—material, qualitative, or both—so I’m going to explain how they work, what is involved in using them, and some of their pros and cons. As with everything else on the Web, it seems, the answer is a clear-cut “it depends,” based on your individual circumstances and requirements.

First Things First: Weigh the Dollars and Sense

Let’s get the money part out of the way. While there are certainly some notable exceptions, in most cases good type costs money. It costs because it’s hard to design, hard to finesse, and hard to make work well on all platforms and in all browsers. So just as with photography, we should expect to pay something for its use.

As a fan of type, I enjoy having lots of options. But to make sure I keep having those options, there need to be type designers. And if I don’t pay for fonts, there’s no money to pay type designers. Multiply that by “everyone” and it’s a pretty big problem. All those caveats and workarounds we have to contend with largely stem from the evolving landscape in font quality and typeface evolution, and if we don’t actually pay the licensing costs, the companies working to smooth out the technical problems and make web fonts available won’t survive, and our progress will stall.

Use with Caution!

A note about services that create web font files from your uploaded desktop fonts: plain and simple, it’s probably a violation of your End User License Agreement (read about them in the following sidebar). Unless that EULA explicitly states you can use it for font embedding, it’s not OK. (And realistically, the quality of an automatic conversion is likely to suffer.) It’s a bit like a file-sharing network; the network itself may not be illegal, but what happens on it most certainly is.

Thankfully, the terms most of these services present are generally reasonable, and geared toward making it easy for small shops to get an account and start using them with all of their clients. Most self-hosting licenses and services base costs on traffic levels. This is why it’s important to know your needs: while some services are only $100 per year for up to a million page views per month, if you have a much higher level of traffic, it can escalate costs quite a bit. One service shows a cost of $100 per month for 5 million monthly page views (a 12x increase in cost for a 5x increase in traffic). That may seem skewed, but the benefits in performance and reliability that come from using that service often can outweigh the cost.

Now that we’ve covered the legal bits, let’s dig in to the nuts and bolts of type families and files.

Type 101: A Font Is Not a Typeface

When getting started with using web fonts, it’s important to point out the difference between a typeface and a font, and why that matters so much on the web. When talking about the two in this context, the typeface refers to the whole design, whereas font references the actual file containing the specific weight and variant of the typeface (see Figure 4-1). When specifying a font for inclusion on our site, we must remember that we are specifying a specific weight and style of that typeface rather than the whole family.

A font is not a face, but a face is made of many fonts
Figure 4-1. A font is not a face, but a face is made of many fonts

So for body copy we may be specifying Trade Gothic Regular, but for display use in headings we will likely want to specify Trade Gothic Bold, and if we want the <i> or <em> tag to be italic, we must include Trade Gothic Regular Italic. So when you are purchasing fonts for use on your site (or picking them in whichever service you have chosen) you must remember to include all the weights and styles that will be required (such as Book, Bold, Italic, and Bold Italic for body copy). Typekit and Google Web Fonts are the only web services (as far as I know at the time of this printing) that will automatically equate an available bold weight to a <b> or <strong> tag when used inside a block of copy that is set in one of their web fonts—though it should be noted that technically it’s still a separate font file for each. While this does require a bit of extra work at times to set up, it also allows you to buy and embed only the weights and styles you need, ensuring that the total download for a site is as slim as it can be. (Fair warning: I will be stressing this point about download performance more than once!)

Browsers Are Not Type Designers!

Don’t forget that you have to both specify the bold weight of the font and include font-weight: normal in your CSS. If you don’t, you may end up with some browsers double-bolding your type. Firefox in particular is known to try to create “faux” bold and italic fonts, so if you are specifying things yourself, don’t forget this step as it can produce some very odd-looking results.

Great. Now what do you do with this newfound knowledge? Move on to your next big decision: choose to do it yourself or use a service!

DIY: Self-Hosting

Self-hosting web fonts is not an overly complex affair; it just requires some basic attention to detail, a couple of important points with regard to structuring your CSS, and an understanding of the resources it requires (or conversely, how the limitations of your hosting environment can impact performance). Let’s go through the basics of what files you need and how best to serve them.

Get the Right Assets

You have a few choices when hosting your own fonts: create them yourself; download open source ones such as Open Sans, Source Sans, Fira Sans, or others; or purchase them from a vendor that offers web-use licensing. Once you’ve acquired fonts for your project, you must include the font files for each weight and style (in the four formats discussed in Chapter 1: TT, EOT, SVG, and WOFF) on the server with the rest of your website files, and reference them using @font-face in your CSS.

DIY Bonus!

One significant bonus when hosting yourself: you can group weights and variants in your @font-face declarations, so that standard tags will behave as they should without extra CSS (i.e., <b> and <strong> will be displayed with the specified bold weight without having to remap them in your styles—see the code in Example 5-1).

Serve Them Well

The next considerations are bandwidth and availability. If your site is hosted on a shared resource (such as the ones many of us use, from services like Media Temple, Bluehost, Rackspace, and others), the speed with which your fonts are served is only as fast as the rest of your site. Considering that the fonts may total 300k or more, even when some requests are cached on the user’s system, that still adds a significant amount of traffic out of your monthly allocation. It also means that users from other geographic areas are loading all of the resources from your server, sometimes greatly increasing the load time if they are located in more far-flung locales (like reaching a US-hosted web site from Australia or New Zealand—often a much slower ordeal than you’d want to admit).

Keep Current

Finally, there is the subject of updates. I ask in all seriousness: when was the last time you downloaded an update for your fonts? I know that my answer until recently was “What?” (even before getting to “Never”). But given the evolving nature of web fonts, the quality of hinting, and the emerging format standards, you can reasonably assume that this must become part of your regular maintenance.

Bandwidth, speed, and updates are all points to consider. With all that in mind, there are certainly cases in which self-hosting can be the smartest way to go, but let’s look at the service option.

Something Borrowed (er, Rented): Using a Service

Web font services are the other option when it comes to @font-face usage. With these, you can sign up for an account (most offer some sort of free option), pick your typefaces, add a line of JavaScript or a CSS include, and either add selectors through the service or in your own CSS—and voilà: your fonts magically appear. Services are generally the easiest way to experiment with web fonts, and since most have some sort of free account, so it’s easy to test the waters. Google has gone a step further and created its own web font service that is entirely free. One caveat with free and open source fonts such as those offered by Google is they may or may not have the same level of detail and polish as commercial offerings. Some certainly do, but many more may not.

The area where this will be most apparent is with hinting. It’s quite a laborious process that requires a lot of experience and finesse, so it’s the area most likely to be lacking. On the commercial side, all of the for-pay services have been updating fonts nearly continuously, making the process of staying current with the latest updates and technologies nearly seamless. I’ll admit—I’m generally a big fan. As you can guess from the involvement of Adobe and Monotype, the industry is taking web fonts very seriously, and companies are investing heavily in improving the technology and quality of the fonts themselves.

There is, of course, more to the story. Font selection from services is pretty impressive, ranging from “merely” hundreds to over 30,000 available on Fonts.com, and even the smallest catalogs are full of high-quality fonts. (See a selection of the most common services in Table 4-1.) Searching for fonts on each of the sites is generally OK: with Fontdeck and Typekit have a couple of the more interesting ways of searching by tags, in addition to basic categorization like classification and foundry. I do appreciate the ability to search by designer, but only Fonts.com and Fontdeck allow that. Unfortunately, thus far no single source has created a truly comprehensive, easy-to-understand way to search. To be fair, that’s not just a web font problem but a typeface search and selection conundrum in general.

Table 4-1. Some of the more common web font services
ServiceBacked byEmbeddingFavorite feature

Cloud Typography

Hoefler & Co.

CSS

Fine control over included features

Fontdeck

Fontdeck

JavaScript & CSS

Robust tag-based searching

Fonts.com

Monotype

JavaScript & CSS

Search by designer

Google Fonts

Google

JavaScript & CSS

Free, very flexible use, including subsetting

Typekit

Adobe

JavaScript

Very visual search cues

Webtype

The Font Bureau

CSS

Search by intended size

Once you’ve selected the fonts you want to use, there is generally a choice to assign fonts to selectors through the service or set them up in your own CSS. I generally opt for my own CSS, as it affords more control over usage, font stacks, and fallback finessing. It also keeps the control over how typefaces are specified in one place (and in the hands of the designer).

Another benefit of using a service is bandwidth and availability. All of the major services use content distribution networks (CDNs) to serve copies of font files from geographic locations around the world, using address lookup techniques to serve files to users from the closest locations for the fastest response times. This has two important additional advantages: the services are redundant so that no single outage will prevent them from loading, and it drastically reduces the bandwidth and load on your own server.

So undoubtedly you’re wondering about the catch. Here it is: traffic. The for-pay services all charge by page views per month. Generally those limits are fairly high (anywhere from 25,000 per month for a typical free account to one million page views per month on more “standard” professional accounts). This will work for many sites but, obviously, not all. All offer higher tiers of traffic, ranging up to 50 million page views per month or more, but for some the economics tilt toward using their own fonts and infrastructure, saving money in the long run. If the licensing you have allows for it, self-hosting may be more cost-effective, but that’s a big if in many cases.

Now that you’ve learned the ins and outs of both hosting and services, we can get to the fun part: getting fonts on your site! There are still a few differences in the how of either choice, but for the most part the next steps are the same for both.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required