CSS Font : Styling

Setting Font in CSS

  1. The font-family property allows you to specify the typeface used to display a piece of text.
  2. The font-family property may use more than one typeface.
  3. If the browser does not support the first font, it tries the next font from list

font-family Property : Syntax

[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ]

Initial value : Varies depending on the browser or user agent.

Example :

font-family: "Times New Roman", Georgia, Serif;
  1. Suppose user don’t have “Times New Roman” installed on his/her system then page will be rendered with next font “Georgia“.
  2. If “Georgia” is also not installed on local system then page will rendered using “Serif“.
  3. Generally last font should be generic font means common font which will be available on each system by default.

Generic Font Families :

Generic Font Resembles
serif Times Or Times New Roman
sans-serif Helvetica or Arial
cursive Zapf-Chancery
fantasy Western
monospace Courier or Courier New

Generic Font Preview :

Generic Fonts in CSS

Some Important Notes :

  1. Always use generic fonts as last option because , in worst case if ¬†user don’t have any of the specified font installed in his/her system then generic font will display or render page any how.
  2. Use “double quote” to specify font name having spaces. like “Times New Roman”.