Let's add some font families to our stylesheet:
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; }
We set the font families that our theme will use, including:
body
element, which will apply to anything we don't specify an alternative font family for, because of CSS inheritancepre
and code
element, in other words for the display of code in our themeYou'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.
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.