Fonts using CSS

The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.

There are two types of names used to categorize fonts:

  1. family-names
  2. generic families

Family-name

Examples of a family-name (font): "Arial", "Times New Roman" or "Tahoma".

Generic family

Generic families can best be described as groups of family names with uniformed appearances. An example is "sans-serif", which is used for three font-families such as Trebuchet, Arial and Verdana.

Times New Roman, Garamond and Georgia are three font-families belongs to generic family "serif".

When you list fonts for your web site, you start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family. That way at least the page will be shown using a font of the same family if none of the specified fonts are available.

Example

h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase
instead.

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. 

The size of a font is set by the property font-size. There are many different units (pixels and percentages) to describe font sizes. For example,

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size. To make your website accessible for everybody, you should use adjustable units such as '%' or 'em'.

Compiling: font

Using the font short hand property it is possible to cover all the different font properties in one single property.

For example,

p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Using the short hand property, the code can be simplified:

p {
font: italic bold 30px arial, sans-serif;
} 

The order of values for font is:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size
  5. font-family