SPICING UP YOUR FONTS AND TEXT - Practical CSS3: Develop and Design - page 73

will be used; otherwise, setting bold will have no effect, and you should set
it to normal instead or not include it.

A font-style declaration to specify usage of an italic version of the font if
it's available. If the font file you are pointing to contains an italic version, it
will be used; otherwise, setting italic will have no effect, and you should
set it to normal instead or not include it.

Of course, nothing is ever this simple in web design. Those dastardly browser
vendors haven't been able to agree on a single font file format to support until
recently, and you also need to think about older browsers, which use older font
formats. Table 3.1 gives you an idea what current font format support looks like
across browsers.

TAB LE 3.1 Browser Support Matrix for Font Formats

BROWSER/
FONT FORMAT

SUPPORT @
FONT-FACE

TRUETYPE
(.TTF)

OPENTYPE
(.OTF)

EMBEDDED
OPENTYPE (.EOT)

SVG WEB OPEN FONT

FORMAT (.WOFF)

Opera Since 10 Ye s Ye s No Ye s Ye s

Firefox Since 3.5 Ye s Ye s No No Ye s

Safari Since 3.1 Ye s Ye s No Ye s Ye s

Chrome Since 4 Ye s Ye s No Ye s Ye s

Internet
Explorer

.eot since 4,
.woff since 9

No No Ye s No Ye s

iOS SVG up to 4.1 Ye s Ye s No Ye s Ye s

Android Since 2.2 Ye s Ye s No Ye s No

Chrome Mobile Since beta Ye s Ye s No Ye s Ye s

Opera Mobile Since beta Ye s Ye s No Ye s Ye s

Fortunately, all browser vendors have now agreed on supporting the new W3C
WOFF standard ( www.w3.org/TR/WOFF), which is a container/compression format
for OpenType and TrueType fonts that can also contain licensing information and
suchlike. It is a winner all around, resulting in smaller file sizes and happier font
foundries. It has been supported for ages in Firefox and Chrome, Safari since ver-
sion 5.1, Opera since version 11, and Internet Explorer (IE) since version 9.