HTML5 and CSS3, Second Edition

(singke) #1

Figure 29—The blog with the new font applied


Font stacks are lists of fonts ordered by priority. You specify the font you most
want your users to see, and then specify fonts that are suitable fallbacks.
When creating a font stack, take the extra time to find truly suitable fallback
fonts. Letter spacing, stroke width, and general appearance should be similar.
The website Unit Interactive has an excellent article on this.^8

Let’s alter our font like this:


css3_fonts/stylesheets/style.css
font-family:"GarogierRegular",Georgia,
"Palatino","PalatinoLinotype",
"Times","TimesNew Roman",serif;

We’re providing a wide array of fallbacks here, which should help us maintain
a similar appearance in various circumstances. It’s not perfect in all cases,
but it’s better than relying on the default font, which can sometimes be quite
hard to read.

Fonts can go a long way toward making your page more attractive and easier
to read. Experiment with your own work. There’s a large number of fonts,
both free and commercial, waiting for you.

Now let’s look at how we can use CSS to create animations.



  1. http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/


Chapter 8. Eye Candy • 168


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf