CSS font stack builder
Build a safe CSS font-family stack for system UI, serif, sans-serif or monospace text, see which font renders on your device, and copy the CSS.
The quick brown fox
A font stack is a list of preferences. Each visitor sees the first font their device can draw, so the same CSS looks a little different on Windows, macOS, Android and Linux. 0123456789
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Tailwind (tailwind.config.js) */
fontFamily: {
sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
}What makes a good font stack?
A font stack is an ordered list. The browser uses the first family that is available and contains the character it needs, and moves down the list otherwise. A good stack starts with your web font, continues with fonts of similar proportions that ship with each operating system, and always ends with a generic family such as sans-serif.
Matching proportions matters more than matching style. If the fallback is much wider or narrower than the web font, text reflows when the web font arrives, which causes layout shift. The line above the preview shows which entry your own device resolves to, so you can check the stack on each platform you care about.
The presets follow the public-domain Modern Font Stacks project. Add your web font in front, and the builder quotes names correctly and appends the generic family for you.
What is the system font stack?+
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif asks each platform for its own interface font: San Francisco on Apple devices, Segoe UI on Windows and Roboto on Android. It loads nothing and renders instantly.
Do font names need quotes?+
Names with spaces, digits or punctuation should be quoted. Generic families and keywords such as serif, system-ui and ui-monospace must not be quoted, or the browser treats them as a font called that.
How do I know which font in a stack is being used?+
Browser DevTools show it under Rendered Fonts in the Computed tab. The Font Inspector extension shows the rendered font next to the declared stack and flags when a fallback is showing.
Is your web font really loading?
Font Inspector shows the declared stack and the font actually rendered for any text, and warns you when visitors are seeing a fallback instead of your web font.