Prev Next

CSS Font Fallbacks

Font fallbacks ensure that if a preferred font isn’t available, the browser uses the next option in the list. This guarantees readable text in any environment. Always end with a generic family (e.g. sans-serif) to ensure a functional font is chosen.

Key Topics

Stacking Fonts

List fonts in quotes if they have spaces ("Open Sans", "Times New Roman"), followed by simpler fonts and finally a generic family.

Generic Families

Generic families like serif, sans-serif, or monospace ensure at least a basic style is always available.

<style>
    body {
        font-family: "Open Sans", Helvetica, sans-serif;
    }
</style>

Explanation: If "Open Sans" isn’t installed, the browser tries Helvetica, and if unavailable, defaults to sans-serif.

Key Takeaways

  • Reliability: Fallbacks prevent broken typography if a font can’t load.
  • User Experience: Ensures readable text across devices.
  • Good Practice: Always include a generic fallback for safety.
Prev Next