Oğuz Demirkapı

Using fonts is a common approach in CSS definitions. But sometimes we need to be careful while selecting fonts in our styles.

Since not all fonts are available on all computers, CSS provides a system of fallbacks. First it tries the font that we defined and then follow up our list with availibility. If there is not an available font on the system it uses one of the generic fonts. There are 5 generic font as "serif, sans-serif, monospace, cursive and fantasy".

Here are some examples:

• "sans-serif" (normal fonts without serifs): Arial, Helvetica, Lucida, sans-serif
• "serif" (normal fonts with serifs): Times, Times New Roman, Bookman, serif
• "monospace" (fixed-width fonts): Courier, Courier New, Lucidatypewriter, monospace
• "cursive" (fonts that emulate handwriting): Comic Sans, Coronetscript, Florence, cursive
• "fantasy" (decorative fonts, for titles, etc.): Impact, Oldtown, Brushstroke, fantasy

While defining our fonts we need to define a list of fonts as following.

style="font-family:Arial, Helvetica, sans-serif;"

It will try to render with the following order.

A small note here; Sometimes fonts are different depending on Operating Systems. As an example, "Helvetica" looks like a replacement for "Arial" in Mac OSs and we should be also carefull to include Mac and Linux font variations in our lists.