Choosing a font family or font families is one of the most common tasks during working with the CSS.

The biggest problem is that different browsers or systems might react differently to the same families so the suggestion is to always add more then one family in the same property thus giving an opportunity to the browser to choose the second best if there are problems with the primary font. Saying that, there are families that have been well established and function well across the Internet. Let's mention a few: Arial, Times New Roman, Courier New, Tahoma, Helvetica, Georgia...

Font family names may be divided into a family-name and a generic-family. The family-name refers to the main family of choice such as those mentioned above. The generic-family names are the names that refer to the basic accepted families.

Those would be:

  • serif (Times, Georgia...);
  • sans-serif (Arial, Helvetica...);
  • cursive (Comic Sans MS, Lucida Handwriting...);
  • fantasy (Charcoal, Desdemona...);
  • monospace (Courier, Lucida Console...).

Font-family property

The property that is used for choosing font Family is named font-family property.

The font-family property contains following information:

  1. value: family and generic names;
  2. initial: depends on browser;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

The property value's syntax is a list of font family names and / or generic family names separated by commas. Font family names must be given quotes as strings, or unquoted as a sequence of on or more identifiers.

It is suggested to attach a generic name as an alternative. Generic names must be without quotes!

Example

Example of CSS font families:

 

›› go to examples ››