Embedding Web Fonts - Beginning CSS3 - page 76

Table 5-2. Font Format Strings

Font Format Format String

EOT "embedded-opentype"
TrueType "truetype" *
OpenType "opentype" *
WOFF "woff"
SVG Font "svg"
* The truetype and opentype font strings are regarded as synonymous.

“Bulletproof ” @font-face Syntax
Although the basic @font-face syntax is fairly straightforward, browser bugs complicate the situation. Thanks
to the efforts of Paul Irish and other talented web developers, a “bulletproof ” workaround has been devised. It
involves using two src descriptors like this:

@font-face {
font-family: 'My Font';
src: url('myfont.eot');
src: url('myfont.eot ?#iefix ') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg') format('svg');
}

The first src descriptor takes just the path to the EOT font file. The second src descriptor consists of a
comma-separated list of font file locations, each with a format() declaration. The list begins with the path to
the EOT file again, but with ?#iefix appended to it. The order of the remaining formats isn't important, but it's
recommended to list WOFF next.
The need for two src descriptors for EOT is because of a bug in IE 8 and earlier, which fail to load the font if
more than one format is listed. Adding ?#iefix tricks older versions of IE into treating the rest of the descriptor
as a query string, so the font is loaded correctly. However, the bug was fixed in IE 9, which is why you need a
separate src descriptor for EOT. It's messy, but it works.
If you're not worried about older browsers seeing the web fonts, you can use just the WOFF format like this:

@font-face {
font-family: 'My Font';
src: url('myfont.woff') format('woff');
}

Specifying Bold and Italic
A potentially confusing aspect of embedding web fonts is that the font-family property in an @font-face rule
identifies only a single font, not the whole family with its bold, italic, and other versions, such as expanded or
condensed. If you want the other versions of the same family, you need to create separate @font-face rules for
each one. You can either give each font face a different name, or you can reuse the same name and specify its
characteristics using extra descriptors.