What You Need to Know About Webfonts: Part 1

Jason Cranford Teague

Imagine if we lived in a world where there were only five voices, where one in every five people sounded exactly the same. That’s where we were with Web typography before today. Five typefaces have been used on virtually every website in existence—five voices to express a limitless number of ideas. Because of webfonts, the way in which we present text on a screen has changed forever.
font :: type
voice :: speech
Fonts are to type what voice is to speech. How you express your message is more than just a combination of different letters, numbers, and symbols, known collectively as glyphs. The shape of those glyphs can say as much as the words themselves.
Consider the simple phrase “I love you.” Devoid of the context of speech, you don’t have any idea what it really means. Is it a passionate “I love you,” or a desperate “I love you,” or a sad “I love you”? Now consider the same phrase expressed using different typefaces:

Do you see the difference now?
There are an estimated 150,000 fonts available for typographic design, 150,00 potential voices. So why only five typefaces on the web?
Web typography is the combination of HTML text using CSS to style that text. It relies on the fonts available on the end user’s computer, which, until the last few years, meant only fonts pre-installed by the manufacturer or installed by the users themselves.
Webfonts are a recent development in Web design, allowing designers a potentially unlimited palette of fonts to choose from.
Stacking Fonts for a Better Web
Whether or not you’re using webfonts, you set your type on the Web using a font stack, defined using the CSS font-family property. A font stack is simply a list of typefaces, with the first being the one you prefer browsers to display—the star—followed by other typefaces to be used if the star is not available to the computer—the understudies. The browser will go down the list until it encounters a typeface available to it and use that to display the indicated text. Here’s an example stack:
font-face: georgia, times, serif;
Quick note: Although often used interchangeably, typeface and font are not synonyms. A typeface is the name of a particular font family, like “Times New Roman”. A font is the name of a particular style of a particular font family; for example, “Times New Roman Bold” or “Times New Roman Italic”. That said, I often slip up and use “font” when I really mean “typeface,” but a lot of people do. It’s important to know the distinction, but the word police won’t come down and arrest you if you refer to a typeface as a font.
Previously, designers assumed that they could only use a mixture of the ten Core Web Fonts, the ten fonts that are almost universally preinstalled on ever Windows and Mac computer in the world. Even worse, there are really only five typefaces from that list that are of regular, practical use:
Arial
Georgia
Times New Roman
Trebuchet
Verdana
Those bad days are over. It’s time to move on.
Webfont History
In theory, it’s been possible to download webfonts for years. CSS has included syntax for accessing font files since the late 1990s, yet none of the browser manufacturers had implemented this functionality. Well, almost none. Microsoft had included the ability to download font files since Internet Explorer 4, but had restricted it to their own proprietary font format—Embedded Open Type fonts (.eot). EOT protected fonts from being copied, a key need from the font makers. Since Microsoft didn’t license the format to other browser manufacturers, it only worked in Internet Explorer. Add to this the difficultly of converting fonts from other formats and the upshot is that no Web designers used EOT fonts.
In the meantime, no one making fonts (the font foundries) would license their fonts for Web use in anything other than a graphic or using Flash, which protected the fonts from being copied by embedding them in the Flash file.
Font makers had the very real fear that what happened to photos and images on the Internet would happen to them, and it would become not only easy but commonplace to copy the font from your favorite website without paying for it. For years, the browser makers honored this, and we designers waited for an open standard font format to be developed that would make font downloading as easy as image downloading, but still protect the files from being copied.
And we waited, and waited, and waited.
Finally, in 2008, Apple’s Safari Browser added a remarkable new feature: You could download a common Open Type or True Type (.otf and .ttf) font file to use in your design. This was a bold move on their part, and it caused quite a stir in the standards community. The W3C’s CSS Workgroup had just shot down an attempt by Microsoft to make EOT an open standard endorsed by the W3C. The majority of members at the meeting where this was debated felt that it was not our job to endorse any particular file format, but to let the market guide that.
Apple’s move opened the floodgates that did just that.
In 2009, Firefox, Opera, and Chrome all added the ability to download fonts. The exact formats support varied from browser to browser, but they were all covered, including the major mobile platforms, as well.
By 2010, almost every browser supported webfonts—even Internet Explorer. Necessity is the mother of invention, and when other browsers started supporting webfonts, some very clever people began developing easier ways to convert fonts to EOT, reinvigorating this almost-forgotten format.
And Now… the Webfonts!
A webfont is a font file downloaded from a Web server and used by the browser to render HTML text (Figure 2).
Figure 2. This diagram shows the paths a webfont travels on its way from the server hosting website to a site visitor’s screen.

You begin by uploading the font file from your computer to your Web server, the same as you would upload any data file.
Once uploaded to the server, the font file is accessed by your Web page using the @font-face rule. This defines the source of the font file, what you want to call this font in your code, and whether the font is used for normal, bold, and or italic/oblique styles. Most simply stated, the format looks like this:
@font-face {
    font-family: 'caviar dreams';
  src: url('_fonts/caviardreams.otf') format('opentype');
    font-style: normal;
    font-weight: normal; }
This allows the Web page to access the file called “caviardreams.otf” which is located in the “_fonts” folder. This example uses a relative path, but you can use absolute paths as well. I’ve also defined this font to normal style (not bold and/or italic). I can also include separate @font-face rules for bold, italic, and bold italic versions of the font. More on that in a bit.
One important warning: Firefox will not allow you to load a font from a domain other than the one that the summoning Web page is on. That is, if your HTML file is in one domain (www.thisdomain.com) and your font file is on another domain (www.thatdomain.com), Firefox will refuse to use it unless you specifically configure your server to allow it, using HTTP Access Controls.
You can now add the newly named font family to your font stack:
font-family: 'caviar dreams', 'franklin gothic medium', helvetica, arial;
Notice that the font and the font family have the same: “caviar dreams”. This may seem like the logical thing to do, but I actually don’t recommend this. Instead, give the font a generic name that describes what it will be used for in the design, like “body copy” or “headers”. That way, if you need to change the font being used—for example, because your client changes their minds two days before launch—you only have to change the @font-face source rather than searching through potentially thousands of lines of CSS code to change the name.
When the browser loads the Web page with this code, it will also load the font file and use its data to display the text on the page.
Not So Fast
However, there’s one snag. As I mentioned previously, different browsers support different font file formats. There are also differences between browsers on computers and browsers on mobile devices. There are five basic formats:
1. Embedded Open Type Font (.eot) – Only used by Internet Explorer. Protects the font from being copied.
2. True Type Font (.ttf) – A common font format.
3. Open Type Font (.otf) – Another common font format.
4. Scalable Vector Graphic (.svg) – A W3C standard that can store font data in vector format. SVG isn’t recommended as a format anymore because it makes some browsers crash.
5. Web Open Font Format (.woff) – A new open standard font format developed especially for the Web. It offers some of the same protections as EOT but is less cumbersome to use.
The tables below show which browsers (including mobile browsers) support which font formats:


To accommodate different browsers and versions, you’ll need to construct your @font-face rule so that it provides the proper format for each browser:
@font-face {
font-family: 'body copy';
src: url('_fonts/caviardreamseot?#iefix') format('embedded-¬?opentype'),
url('_fonts/caviardreams.woff') format('woff'),
url('_fonts/caviardreams.ttf') format('truetype');
font-weight: normal;
font-style: normal; }
This provides EOT, WOFF, and TTF versions of the font files, which will cover the overwhelming majority of browsers, ensuring that they will display your text using the same font. I left out an SVG version because most browsers support other formats, and SVG can cause older iOS versions of Safari to crash. This is a variant on the Fontspring Bulletproof @font-face syntax, which you can read more about on the Fontspring blog.
Notice the “?#iefx” for the EOT source definition. This is always included with the EOT source so that IE won’t choke on having multiple sources listed after it’s own.
You can now add multiple @font-face rules for each of the different styles by referencing the different font files for each:
For bold:
@font-face {
    font-family: 'body copy';
  src: url('_fonts/caviardreams_bold.eot?#iefix') format('embedded-opentype'),
    url('_fonts/caviardreams_bold.woff') format('woff'),
    url('_fonts/caviardreams_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal; }
For italic:
@font-face {
    font-family: 'body copy';
  src: url('_fonts/caviardreams_italic.eot?#iefix') format('embedded-opentype'),
    url('_fonts/caviardreams_italic.woff') format('woff'),
    url('_fonts/caviardreams_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic; }
For bold and italic:
@font-face {
    font-family: 'body copy';
  src: url('_fonts/caviardreams_bolditalic.eot?#iefix') format('embedded-opentype'),
    url('_fonts/caviardreams_bolditalic.woff') format('woff'),
    url('_fonts/caviardreams_bolditalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic; }
Now you know how to get fonts downloaded and used in your Web designs, but that’s the easy part. Although there are about 150,00 fonts out there, you can’t use them all unless you want a lawsuit on your hands. Every font is controlled by an End User License Agreement (EULA), which spells out what you can (and can’t) legally do with the font.
In part 2 of this series, I’ll show you how to navigate the legal waters of the Web type world to find the best fonts for your designs.