Changing the Font - CSS3 Foundations - page 171

Fonts come in the following formats:
• .ttf (TrueType Font)
• .otf (OpenType Font)
• .eot (Embedded OpenType)
• .woff (Web Open Font Format)
• .svg (Scalable Vector Graphics)
When Internet Explorer 4 implemented @font-face , it supported only the .eot format, and the situation remained
that way up to Internet Explorer 8. Because the .eot format is proprietary, belonging to Microsoft, no other browser
supports it. The only format to be supported by all other browsers (including Internet Explorer 9) is .woff. So, when
using @font-face , you should aim to have .eot and .woff formats of the same font.
If you have only one font type, numerous tools available online take that one format and convert it into the rest for
you. My personal recommendation is Font Squirrel's @font-face Generator, found at www.fontsquirrel.com/
fontface/generator .
Converting fonts to a different format may be against the license for a font, so you should always be certain a font
license allows for this behavior before going ahead. More on font licenses in a moment.
The Cool Shoes & Socks project files contain an .eot and .woff font called Average. Tell the browser to download
this font for later use:
1. In styles.css, above the body rule set, add the following:
@font-face {
font-family: Average;
src: url(“../fonts/Average-Regular.eot”);
src: local(“Average”),
url(“../fonts/Average-Regular.woff”);
}
Because this rule set doesn't have a selector, it only lets the browser know the name of the font and where it is
located, via the src declaration. Due to Internet Explorer 6, 7, and 8 supporting only .eot font formats; you
specify two src properties. Internet Explorer 6, 7, and 8 read and apply the first property, but because they
don't understand the syntax of the second, they ignore it.
The second src property consists of two functions: local() and url() . By placing the local() function
first, you tell the browser (those which aren't Internet Explorer versions below 9) to check to see whether
the device already has the font saved locally, and if not, to download it from the source specified in the
url() .
At a minimum, the @font-face rule must include font-family and src declarations; otherwise, it is ig-
nored.
Now to use this font, do the following: