Setting Font in CSS
- The font-family property allows you to specify the typeface used to display a piece of text.
- The font-family property may use more than one typeface.
- 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;
- Suppose user don’t have “Times New Roman” installed on his/her system then page will be rendered with next font “Georgia“.
- If “Georgia” is also not installed on local system then page will rendered using “Serif“.
- 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 :
Some Important Notes :
- 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.
- Use “double quote” to specify font name having spaces. like “Times New Roman”.