Time for Action – assigning your font families

Let's add some font families to our stylesheet:

  1. In your style.css file, under the TYPOGRAPHY comment, add the following code:
    /*------------------TYPOGRAPHY -------------------*/
/*
Set font stacks here
Assign default colors only. Otherwise color is handled at BOTTOM of sheet.
*/

body
{font-family: 'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif;
}
h1, h3, h5{  font-family: Helvetica, Arial, sans-serif;
}
h2, h4, h6{  font-family: 'Helvetica Neue', Helvetica, 'Arial Condensed', Arial, sans-serif;
}
a {  font-family: Helvetica, Arial, sans-serif; 
}
pre, code{  font-family: Courier, monospace;
}
  2. Save your stylesheet.

What just happened?

We set the font families that our theme will use, including:

  • The default font for the body element, which will apply to anything we don't specify an alternative font family for, because of CSS inheritance
  • Font families for our headings and links
  • Finally, a font family for pre and code element, in other words for the display of code in our theme

@font-face techniques

You'll be pleased to know we can take advantage of a much wider world of typography than just what's hopefully installed on other people's computers. Using @font-face and other techniques, you can serve up fonts of your choice to your site's users. We'll go over these techniques in detail in Chapter 7, Tips and Tricks.

Note

Warning: Most fonts are licensed! You must not violate the terms and licensing of fonts. As most were expecting to be used with print, many have licenses which will be violated if you use them on the web with the @font-face, Cufon (or sIFR) techniques. Your best bet is to use open source fonts. A great repository is http://www.fontsquirrel.com/. We'll also be using Google's new font repository: http://www.google.com/webfonts.

The next step is to specify sizing for our fonts.

Styling font sizes

We have our font families in place, but we need to tell browsers at what size to display the text in our theme.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.21.100.34