Putting it All Together - HTML5 with CSS3 - page 377

Font Formats

Using web fonts seems easy enough so far, and the CSS itself really can be as simple as you've seen. But
there's another side to this story that makes it a little more complicated. Like other electronic media, digital
fonts come in a variety of file formats, and not all browsers support all of the same formats. The most
common web font formats you'll encounter are:

 TrueType (TTF) - One of the oldest and thus most common font formats, TrueType is supported

by Firefox, Safari, Chrome, and Opera, but not by Internet Explorer. TrueType fonts use the
extension .ttf .

 OpenType (OTF) - An extended update of TrueType, OpenType fonts are also supported by

Firefox, Safari, Chrome, Opera, but not by IE. They use the extension .otf .

 Scalable Vector Graphics (SVG) - Fonts in SVG format are intended for use in other SVG media,

but some browsers can also use them to render ordinary text. Safari and Opera support SVG
fonts, but not Firefox, IE, or Chrome. SVG fonts use the .svg extension.

 Embedded OpenType (EOT) - This is a compact variant on the OpenType format created by

Microsoft especially for embedding web fonts, but the format was proprietary and never caught on
with other browsers. Only Internet Explorer supports these fonts, which use the extension .eot .

 Web Open Font Format (WOFF) - A relative newcomer, the WOFF format supersedes TTF/OTF

and is optimized for the Web. Current versions of Chrome, Firefox, IE, Opera, and Safari all
support WOFF fonts. The file extension, as you might expect, is .woff (pronounced just like it's
spelled, so it's also fun to say).

Note that the Web Open Font Format is the only web font format supported by every major desktop
browser, though only in recent versions. Older browsers—and even some current mobile browsers at the
time we write this—don't support WOFF fonts. To compensate for this and ensure your chosen fonts are
seen by as many visitors as possible, you'll need to embed your web fonts in more than one format. That's
no problem because the src property in an @font-face rule will accept multiple values, separated by
commas:
@font-face {
font-family: "Lobster Two";
src: url(fonts/LobsterTwo-Regular.woff),
url(fonts/LobsterTwo-Regular.ttf);
}
You can optionally include a format() value for each format after the url() value (the format must be
enclosed in quotation marks):
@font-face {
font-family: "Lobster Two";
src: url(fonts/LobsterTwo-Regular.woff) format("woff") ,
url(fonts/LobsterTwo-Regular.ttf) format("truetype") ;
}

Browsers use the first supported format they encounter while parsing the style sheet; in this example,
browsers that support both WOFF and TrueType will favor the WOFF file because it's declared first. The