Font stacks are important because they provide multiple fallback fonts, if the first font option is not available. Different operating systems come pre-installed with fonts and not all systems have the same fonts. A font stack allows the designer to have maximum control over the fonts the website uses.
A font stack is a list of fonts in the order they should appear on the website in the event the first font doesn’t load. If only one font is specified and it isn’t available for a viewer, the browser will choose a font, and the font the browser selected may not be the desired look. Having a font stack insures that if the first font isn’t available, the next font the system tries to use is one that is pre-selected by the designer, and not one the operating system has selected.
What is a Font Stack?
A font stack is created by multiple fonts, all separated by commas, and ends with a generic font classification. When a website renders, the text on the site will display in these pre-selected fonts. A generic font classification is the type of font family you are trying to achieve like “sans-serif”, “serif”, “cursive”, “monospace”, or “fantasy”. This is the last fall back option for your font stack in the unlikely event that all other specific fonts listed before are unavailable. In the rare case that the generic font classification must be used, the browser will select the best font option, but only from that classification type.
Add as many fonts as desired to the font stack. The more fonts in a stack, the more likely all viewers will see the website in a font the designer has specifically selected. A good rule of thumb for length of a font stack is 3-6 fonts.
