There are two types of font family names:

family-name – The name of a font-family, like “times”, “courier”,

“arial”, etc. generic-family – The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

A “font-family” usually has similar variations of the same type of font, for example- http://www.webtype.com/font/shift-family/

A “generic-family” usually contains similar looking “font-family”s

The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.

An example:

p { font-family : Times New Roman, Georgia ; }

If the browser is not able to access Times New Roman, it tries Georgia.

Imagine if the browser is not able to access Georgia too, what would you do? You may say, “Add another similar looking font-family”. Well, what if the browser is not able to access that too?

This is where “generic-family” comes in. Take a look at this example:

p { font-family : Times New Roman, Georgia, serif ; }

Now if the browser is unable to access both Times New Roman and Georgia, it will try to access a font from the generic-family serif (Times New Roman and Georgia are members of the generic-family ‘serif’).

Oh, and there are usually THOUSANDS of fonts in a generic-family like serif.

p { font-family : Shift, sans-serif ; }

‘Shift’ is a font-family.

The ‘Shift’ font-family is a member of the generic-family sans-serif.

So the browser first attempts to access ‘Shift’. If the browser can’t access it, it picks a font from the generic-family sans-serif.

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family if no other fonts are available.

Still confused? Take a look at these links-

http://stackoverflow.com/questions/4673963/css-fallback-fonts

http://www.w3.org/TR/CSS2/fonts.html#generic-font-families