How to Specify Font Families Using CSS
Body
{
Font-family: Verdana, Arial, sans-serif;
}
- List of fonts should always contain alternative fonts all from the same family.
- Commas separate font names.
- Write names as they appear, including upper and lower case letters.
- Always include a generic font family name at the end.
How font family specifications work
- Browser checks first font family in the list, then next if necessary.
- Cannot count on users’ computers having fonts you specify, but generic font gives you some control over look of the web page.
- Mac and pc platforms have different fonts installed.
There are 5 major font families
-
Sans-serif: fonts without serifs. *Serifs are decorative barbs and hooks on the ends of the letters.
- Sans-serif is considered the best font for computer screen text
- Arial, Verdana, Geneva, Trebuchet MS
- How it looks on the page
- Serif: fonts with serifs; often found in newspaper print
- Times New Roman, Times, Georgia
- How it looks on the page
-
Monospace: constant width characters; “i” and “m” take up the same amount of horizontal space; used to show software code examples.
- Courier, Courier New, Andale Mono
- How it looks on the page
-
Cursive: includes fonts that look handwritten, sometimes used on web page headings
- Comic Sans, Apple Chancery
- How it looks on the page
- Fantasy: Stylized, decorative fonts, not widely available and rarely used in serious web designs
- Impact, Magneto
- How it looks on the page