Font manipulation basics

Using the Font-Family tag

Any standards-compliant browser will be able to display the following generic fonts:

serif
sans-serif
cursive
fantasy
monospace

Note that the fonts won't always look exactly as they are depicted here. The browser simply determines a system font that most nearly matches the generic description.

You may use fonts installed in your system, but they may not appear on other browsers. The safest bet is to use a list of fonts, with the last font in the list one of the generics:


p {
  font-family: "Comic Sans MS", cursive;
}

font-size

Font size describes the size of the text in an element. Font size is described by a number followed by a unit of measurement. The following units are usually used to measure font size:

pt: points - a traditional typesetter's measurement.
px: pixels - each pixel is one dot on the screen
%: percentage - a factor of the font's default size. For example, 125% is 25% larger than the font would normally be.
em em - the width of an "m" character in the current font.

It's generally considered best to avoid setting a specific font size in points or pixels, as certain versions of IE do not allow the user to resize such text. Percentages or ems are preferred units of measurement.

Other Font Characteristics

Use font-style to make an italic font:


p {
  font-style: italic;
}

Use font-weight to make a bold font:


p {
  font-weight: bold;
}

Use font as a shortcut for all font properties:


p {
  font: bold italic 12px cursive ;
}

Note: The order you put the elements in matters. If your font is not working right, switch the order you put the elements in. Style and weight should come first, followed by size and font-family last.