HTML5 and CSS3, Second Edition

Joe asks:

How Do I Convert My Own Fonts?

If you have developed your own font or have purchased the rights to a font and need

to make it available in multiple formats, you can use the website Font Squirrel to

convert the font and provide you with a style sheet with the @font-face code you’ll need.a

Be sure your font’s license allows this type of usage, though.

a. http://www.fontsquirrel.com/fontface/generator

the rest of the rules. The question mark makes IE 8 think everything after

the EOT is query parameters, and it’s essentially ignored.

This code assumes we’ve placed all of the fonts in stylesheets/fonts. The links to

the fonts are relative to the location of the style sheet, not the HTML page

that calls the style sheet. That makes sense, because the style sheet will be

called from different HTML pages in a real-world site.

Now that we’ve defined the font family, we can use it in our style sheet. We’ll

change our original font style so it looks like this:

css3_fonts/stylesheets/style.css

body{

font-family:"GarogierRegular";

}

With that small change, our page’s text displays in the new font, as shown

in Figure 29, The blog with the new font applied, on page 168.

Applying a font is relatively easy in modern browsers, but we need to consider

browsers that don’t support this yet.

Falling Back

We’ve already provided fallbacks for various versions of Internet Explorer and

other browsers, but we still need to ensure our pages are readable in browsers

that lack support for the @font-face feature or are for some reason unable to

download our font.

We provided alternate versions of the Garogier font, but when we applied the

font, we didn’t specify any fallback fonts. That means if the browser doesn’t

support display of our Garogier font, it’s going to use the browser’s default

font. That isn’t ideal.

report erratum • discuss

Working with Fonts • 167

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