The font-family property hold multiple font names as a “fallback” system, to ensure maximum compatibility between browsers and operating systems. If the browser does not support the first font, it tries the next one.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:
Example
p{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
There are some mostly used font combination, organized by generic family.
Sans-serif Fonts
Arial, Helvetica, sans-serif "Arial Black", Gadget, sans-serif "Comic Sans MS", cursive, sans-serif Impact, Charcoal, sans-serif "Lucida Sans Unicode", "Lucida Grande", sans-serif Tahoma, Geneva, sans-serif Verdana, Geneva, sans-serif "Trebuchet MS", Helvetica, sans-serif
Serif Fonts
Georgia, serif "Palatino Linotype", "Book Antiqua", Palatino, serif "Times New Roman", Times, serif
Monospace Fonts
"Courier New", Courier, monospace "Lucida Console", Monaco, monospace
Cursive and Fantasy Fonts
There is only one cursive font on Windows and Macintosh, but not on Linux and that is:
Comic Sans MS
Smart Phones and Mobile Devices
If you are gonna designing web application for mobile devices, you have less choice. Actually, no common fonts are available for Android devices – instead you should use @font-face method to import the fonts. And for iPhone, iPod, and iPad devices, the following common fonts include:
Arial Courier Courier New Georgia Helvetica Palatino Times New Roman Trebuchet MS Verdana
