Designating Font Families Using CSS

HTML provided a tag for changing the font face (appearance of the font). With CSS you can easily use a series of different font faces for different attributes of your site without changing any HTML code!

Font families are defined within CSS for any HTML element that contains text. This means that you can define font-family styles for paragraphs, headings, tables, divs, blockquotes, etc.

Let's take a look at some CSS font-family style settings.

h1  {font-family:Verdana;}
h2  {font-family:Courier;}
p   {font-family:Kristin ITC;}

If included within a web page's styles, the above directions would render font face for H1 level headings as Arial, font for level H2 headings as Courier, and font for text within paragraphs as Kristin ITC.

When writing out font related styles, the case of the characters is important. Computers may not recognize Arial and arial as the same font. Likewise, spacing is important. Kristin ITC and KristinITC are not the same font.

As with HTML, we run into a problem in that not all computers support all fonts. If you specify Kristin ITC as the font for your paragraphs and only 10% of your visitors have Kristin ITC installed on their computers, only 10% will see the effect you want. Your other visitors will get a default font chosen by their browsers.

One method that CSS has for dealing with the font face issue is to provide for arrays within a style sheet. An array allows you to specify a chain of font face choices for an element. The first choice in the array that is found on your visitors' computers will be the font face that is displayed.

Let's go back to our earlier styles for h1 headings and change the font-family style to an arrayed value set.

h1 {font-family:Arial, Verdana, Helvetica;}

The above style now specifies an array. Your visitors' computers would first check to see if the font Arial was available and, if it was, use it. If Arial was not installed, it would check for Helvetica, and so on. Different array values are presented with commas between the array items. A semicolon ends the array just as it does a non-arrayed style definition. Arrays may include any number of values. You could specify an array of two fonts, or two-hundred fonts as you so desired.

Another method CSS affords for dealing with font-families and font availability is the broad group fonts. These include the serif fonts which contain small lines on the ends of the letters, almost like tails and look like This Serif Font; the Sans-Serif fonts which do not have tails and look like This Sans-Serif Font; monospace fonts which are not proportional and are supposed to look like old-fashioned computer text such as this font; Fantasy Fonts which are fonts that fit into no other family like this font; and Cursive fonts which are supposed to look like handwriting.

Suppose we wanted to display our h1 headings using the array we specified earlier: h1 {font-family:Arial, Verdana, Helvetica;}, but we also realize we may have some visitors with none of those fonts installed. The generic font groups can solve this. Arial, Verdana, and Helvetica are all sans-serif fonts. To ensure all visitors at least enjoy a sans-serif view of the page as we intended, we change our array to read as the below:

h1 {font-family:Arial, Verdana, Helvetica, sans-serif;}

Now our page will render at least primarily as we intended it, with sans-serif, if not Arial h1 headings.

You should now know how to use CSS to set up styles and style arrays to display the font families you designate throughout your web site.