Browser Font Stacks Explorer - Online Defaults Per OS

A font stack is an ordered list of font families specified in CSS font-family. The browser attempts to render text using the first available font in the list. If that font isn't installed on the user's system, it falls back to the next font, and so on. The final entry is typically a generic family like serif, sans-serif, or monospace, which guarantees text will always render. Font stacks are essential for consistent cross-platform typography.

Each operating system ships with its own set of system fonts optimized for its rendering engine and design language. Windows uses Segoe UI, macOS uses San Francisco (via -apple-system), Linux distributions typically include Liberation fonts or DejaVu, iOS uses San Francisco, and Android relies on Roboto and Noto families. These differences mean developers must craft font stacks that gracefully degrade across platforms.

The System UI font stack uses -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ... to automatically select the native UI font of the user's operating system. This provides a native app-like feel on every platform without loading custom web fonts. Benefits include zero download time, perfect OS integration, and excellent legibility. It's widely used by major sites like GitHub, Medium, and Bootstrap itself.

You can use the Canvas API to measure text rendered with a target font versus a generic fallback. If the measured widths differ significantly, the font is likely installed. Another approach is document.fonts.check() for fonts loaded via @font-face. However, for locally installed system fonts, Canvas measurement remains the most reliable method. This tool uses Canvas detection to show green (available) or orange (fallback) indicators next to each primary font.

Web-safe fonts like Arial, Times New Roman, Georgia, and Verdana are fonts that have historically been available on nearly all devices. While they're less critical today due to @font-face and system font stacks, they remain useful as reliable fallbacks. Including them in your stack ensures broad compatibility, especially for older browsers and devices. Modern best practice is to use a system UI stack with web-safe fallbacks.

For code display, prioritize fonts designed for legibility at small sizes. macOS offers SF Mono and Menlo, Windows has Consolas and Courier New, and Linux has Liberation Mono and DejaVu Sans Mono. A robust monospace stack: "SF Mono", "Consolas", "Menlo", "Liberation Mono", "Courier New", monospace. Always end with monospace as the generic fallback to ensure monospaced rendering.

Absolutely! Many websites use @font-face to load a primary brand font, then specify a system font stack as fallback. Example: font-family: "YourBrandFont", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;. This ensures your brand typography displays when the custom font loads successfully, while providing a polished native experience if it fails or is still loading.