Most browsers come with standard fonts preloaded. If you use a font not available in your reader's browser the text will appear in a default font (normally Times New Roman or Times). A font can be applied to an element by adding the font-style property to the element's style attribute (inline) or by defining the element's font-style property in css.
| <p style="font-style: Arial">Text</p> | Inline |
| p {font-style: Arial;} | In a Stylesheet |
The web has inherited from print technology two basic types of fonts: serif (e.g. Times New Roman) and sans serif (e.g. Arial, Helvetica, and Courier). When applying a font, it is possible to designate first, second, and third choices.
font-style: Arial, Helvetica, sans-serif;
This will render the text in the paragraph element in Arial. If Arial is not available, Helvetica will be used, and, if Helvetica is not available, the text will appear in the browser's default sans-serif font.
To change the size of the font, define the font-size property:
font-size: 12pt;
You can also give font sizes as percentages ("200%" for double size), point sizes (e.g. "12pt" for a 12 point font), pixel heights (e.g. 10px for 10 pixels), or ems—the length of the letter m (e.g. 1em, 2em).