Font stack
A font stack is a listing of a number of externally similar fonts that can be used for formatting text in a Web site's style sheet. A font stack describes which fonts can be used when the former font is not available, before falling back to the system's default font.
Web page text can be displayed by a Web browser in the font desired by the builder or Web editor only when the visitor has the source file of the font. This means choosing between picking a fairly commonly installed "web safe font (such as one of the fonts included with operating systems like Windows), or having the font downloaded when the page opens.
Instead of choosing a single "Web-safe" font, CSS allows a list of multiple fonts to be assigned to a Web page or HTML element. In this case, the text will be displayed in the first-named font available on the visitor's system. This gives the Web builder more control over the formatting of the text on different systems. It can be prevented that the browser unintentionally falls back to a default font at the time when the desired font cannot be used.
Some examples of font stacks based on popular fonts:
- Arial, Helvetica, sans-serif
- "Open Sans", "Segoe UI", Tahoma, sans-serif
- "Trebuchet MS", Lato, sans-serif
- Georgia, "Times New Roman", serif
- "Courier New", Courier, "Lucida Typewriter", monospace
It is common to end a font stack in a generic family. Should none of the listed fonts be supported, the browser will at least know whether the creator wants the text to be rendered in a sans-serif (sans-serif), serif (serif) or non-proportional font (monospace).
