Font stack
A font stack is a listing of a number of externally similar fonts, which can be used for formatting text in a website'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 one "web-safe" font, a list of multiple fonts can be assigned to a web page or HTML element in CSS. Here, 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 unwittingly 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. In case none of the listed fonts are supported, at least the browser knows whether the creator wants to display the text in a sans-serif (sans-serif), serif (serif) or non-proportional font (monospace).
