CSS font-family Property
The font-family property allows web designers to choose the font that will be used in an element.
Possible Values
- "family-name and/or generic family name" - a list containing font-family names or generic family names.
- inherit - the value is inherited from the parent element.
Family-name refers to individual named fonts such as arial, helvetica and courier, whereas generic family names describe a certain style of font which can contain many different individual fonts.
When writing the declaration the values must be comma separated and any names containing spaces, digits or punctuation other than hyphens should be
placed in double quotation marks when in a style sheet or <style> element and single quotes when used inline in the
style attribute.
Example font-family declaration:
{font-family: "courier new", arial, helvetica, sans-serif;}
There are five generic family names defined in the CSS2 specification and you can see the resulting display of these generic families here:
- serif - Serif fonts tend to have more ornamentation than sans-serif fonts with more starting and ending flourishes on the individual letters.
- sans-serif - sans-serif fonts are 'plainer' than serif fonts but studies have shown that sans-serif fonts are easier on the eye on a computer screen than serif fonts.
- cursive - As you can see cursive fonts look more flowing and handwritten than other generic fonts and are suited to languages such as Arabic.
- fantasy - Fantasy fonts are normally very decorative but still represent normal characters.
- monospace - Monospace fonts are fonts where every character has the same fixed width and has the look of typewriter text.
If you look at these examples in both Internet Explorer and Firefox you will see that the results are very different - one of the reasons why testing your pages across multiple browsers is an essential part of the web design process.
When presented with a font-family declaration the browser looks at the first font in the list and if this is not supported then it works through the list until it finds an available font.
Even the most common fonts are not installed on 100% of systems so it is a good idea to provide other options to preserve the look that you are trying to achieve for the site. Start with the specific fonts which give the look you want and have a generic catch-all family to end the list so that even the most limited operating systems and browsers have a guide on what to display.