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

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.

Georgia serif font

Verdana sans-serif font

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:

Display:

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:

Web-safe fonts

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