CSS Font Fallback Generator
Generate a complete cross-platform font-family fallback stack for your primary font. Every stack ends with the correct generic family so text always renders — even if your custom font fails.
What goes into a good fallback stack
- Your custom font — the family declared in your
@font-face. - Platform system fonts — fallbacks that ship with each OS (Apple system, Segoe UI, Roboto).
- Generic family —
serif,sans-serif, ormonospace. This is required by CSS spec.
size-adjust and ascent-override in a separate @font-face rule that names the fallback and adjusts its metrics to match your primary font.Frequently asked questions
What is a font-family fallback stack?
A comma-separated list of fonts ending with a generic family. The browser tries each in order until it finds one that renders the requested character. Always end with a generic family.
Why do I need a system fallback?
If your custom font fails to load (network error, missing file, unsupported format), the browser moves to the next family. Without a robust chain, text may render in an unpredictable default that breaks your layout.
Should I include both -apple-system and Segoe UI?
Yes. Each covers a different platform — -apple-system for macOS/iOS, Segoe UI for Windows. Including both ensures the correct native system font is used on each platform.
Do I need BlinkMacSystemFont?
Only for Chrome on older macOS versions. It has been deprecated in modern Chrome but remains harmless to include.