Screen shot from: http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/
In the labs we have over 2,500 fonts to choose from.
On the web, we have these:
Screen shot from: http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/
Most people rely on fonts that come with their operating system or software. There are three major categories of operating systems (listed in order of popularity):
We can rely on the fonts from these operating systems being available.
Other common fonts are also installed with Microsoft Office. We can usually rely on these fonts as well.
The font doesn't display.
A different font is used instead (usually chosen by the browser).
As graphic designers, we always want to have control of the font being rendered.
When specifying fonts for web pages, we use a system of "fallbacks", called a font stack.
The font stack allows us to:
This allows us to be sure that we have some control over what font is displayed in our website. Even if the user doesn't have our first choice font, they have some font that we chose.
The font-family property allows us to specify several fonts we might like to use.
body { font-family: Helvetica, “Helvetica Neue”, Arial, sans-serif; }
The font stack breaks down like this:
Note: If a font is more than one word, you must surround it with quotation marks.
Generic Font Families are defined in the CSS Specification as a last resort method. Here is the explanation from the CSS Specification (Note: "user agent" means browser):
Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.
All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.
Here are the descriptions of the five generic font families:
When selecting your font stacks, you should choose several fonts that are the same type of font.
They should be listed in order of your preference and also by prevalence.
Your second-to-last font choice should be installed on most systems (see the chart at the top of the page).
The last choice is mostly just there to make sure the right classification of font shows up if all else fails. We hope to never get to this point, but just in case.
Here are some articles with more information on appropriately choosing your font stacks.