HTML5 and CSS3, Second Edition

AwesomeCo’s director of marketing has decided that the company should

decide on a font for both print and the Web. You’ve been asked to investigate

a font called Garogier, a simple, thin font that is free for commercial use. As

a trial run, we’ll apply this font to the blog example we created in Tip 1,

Redefining a Blog Using Semantic Markup, on page 15. That way, everyone

can see the font in action. Let’s look at how we specify and use fonts with

pure CSS.

@font-face

The @font-face directive was introduced as part of the CSS2 specification and

was implemented in Internet Explorer 5.^6 However, Microsoft’s implementation

used a font format called Embedded OpenType (EOT), and most fonts today

are in TrueType or OpenType format, which all modern browsers support

quite well.

Font Formats

Fonts are available in a variety of formats, and the browsers you’re targeting

will determine what format you’ll need to serve to your visitors.

Font Type Supported Browsers

Web Open Font (WOFF) [F3.6, C5, S5.1, IE9, O11.1, iOS5]

TrueType (TTF) [F3.5, C4, S3, O10, iOS4.2, A2.2]

OpenType (OTF) [F3.5, C4, S3, O10, iOS4.2, A2.2]

Embedded OpenType (EOT) [IE5–8]

Scalable Vector Graphics (SVG) [iOS]

Microsoft, Opera, and Mozilla jointly created the Web Open Font format, which

allows lossless compression and better licensing options for font-makers.

To hit all of these browsers, we have to make our fonts available in multiple

formats. Let’s see how we do that.

Changing Our Font

The font we’re looking at is available at Font Squirrel in TrueType, WOFF,

SVG, and EOT formats, which will work perfectly.^7

Using the font involves two steps—defining the font and attaching the font to

elements. In the style sheet for the blog, add this code:

6. http://www.w3.org/TR/css3-fonts/


7. You can grab it from http://www.fontsquirrel.com/fonts/Garogier and in the book’s downloadable
   code.

report erratum • discuss

Working with Fonts • 165

Download from Wow! eBook <www.wowebook.com>