Web Safe Fonts: CSS Fallback Stacks and Missing Characters

MDN’s web-font introduction describes web-safe families as traditionally common choices across systems and distinguishes them from downloadable resources supplied through a website. A font appearing in this site’s specimen is not evidence that it is installed on every visitor’s device. Treat the preferred design, the resource that supplies it and the fallback plan as separate parts of the page. A familiar family name alone does not guarantee identical line breaks everywhere.

MDN defines font-family as a prioritized list and recommends a generic family at the end. For a simple example that relies on locally available resources:

.page-copy {
  font-family: Arial, Helvetica, sans-serif;
}
.code-sample {
  font-family: "Courier New", monospace;
}

The final generic keywords are not quoted. These rules request alternatives; they do not install files. When using a supplied web font instead, keep its loading configuration with the family declaration and choose a fallback appropriate to the text’s role.

MDN explains that font selection occurs character by character: a later resource can supply a glyph missing from an otherwise available family. A sentence may therefore contain more than one rendered font. Prepare names, accents, currency symbols and any scripts the page actually uses. Inspect whether fallback characters sit comfortably with the surrounding text. Arimo, Lora and Roboto Mono below provide independent sans, serif and fixed-width comparisons, not a claim that these files are universally installed or interchangeable with the example stacks.

Temporarily remove the preferred family from a copy of the page stylesheet or otherwise preview the intended fallback. Compare a long heading, navigation label, button and paragraph at narrow widths. Check wrapping and overflow before restoring the preferred resource. Preserve the same wording and container dimensions so the change is attributable to typography. Keep the fallback stack in the handoff documentation; a screenshot of the successful preferred font cannot explain how the page behaves when that resource is absent.