CSS fonts

Next to text color CSS offers many ways to style text and it can often make the difference between professional and amateurish looking websites.

Font family

Georgia serif font
Georgia serif font
Verdana sans-serif font
Verdana sans-serif font

A CSS font family is the type of font used for rendering text similar to the fonts you select in word processors such as Microsoft Word.

They can be divided into 2 families: serif fonts with little details on the ends of some strokes and sans-serif fonts without those decorations. Serif fonts are easier to read on paper due to the higher resolution making the small decorations clearly visible. For computer screens on the other hand sans-serif fonts have shown to have better readability unless the font size is very big such as headings.

The fonts you specify can only be used if they're installed on the user's system. Because of this there's only a handful of safe web fonts that will work across all systems. There's little point in using special-looking fonts that won't be displayed correctly 99.9% of the time.

To change fonts you can use the font-family property with font names as comma-separated values. Note that font names containing spaces such as new times roman should be wrapped in quotes "new times roman".

CSS font-family:

body {font-family:arial}
strong {font-family:georgia}

Output:

It's good practice to always provide one of the generic fonts such as serif or sans-serif at the end of your font-family statement in case everything else fails:

CSS generic fonts:

body {font-family:verdana,kalimati,sans-serif}
h1 {font-family:georgia,"new times roman",serif}

Web-safe fonts

Here's a list of web-safe fonts you can use for your website that will usually work cross-platform:

Serif font Output
times,"times new roman" The quick brown fox jumps over the lazy dog
georgia The quick brown fox jumps over the lazy dog
serif The quick brown fox jumps over the lazy dog
Sans-serif font Output
arial The quick brown fox jumps over the lazy dog
helvetica The quick brown fox jumps over the lazy dog
verdana The quick brown fox jumps over the lazy dog
sans-serif The quick brown fox jumps over the lazy dog
Monospace font Output
"courier new",courier The quick brown fox jumps over the lazy dog
monospace The quick brown fox jumps over the lazy dog