Web Safe Fonts
Browse common web-safe font stacks and copy CSS font-family declarations.
Overview
The Web Safe Fonts reference lists the font stacks that ship pre-installed on the major operating systems — system UI sans-serif (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto), classic Arial/Helvetica, Georgia/Times serif, Courier monospace — plus the modern system-ui keyword. Each stack shows a sample rendering and the font-family declaration to copy.
Useful for designers and developers learning how to use a web safe font stack or how to write a system UI font-family. Reach for it when avoiding web font network requests for performance, building a privacy-first design, or providing a fallback chain behind a custom font.
How it works
font-family accepts a comma-separated list of families; the browser tries each in order and uses the first one available on the device. A good stack starts with a preferred family, lists OS-equivalent alternatives, and ends in a generic fallback (sans-serif, serif, monospace).
The CSS Fonts Module Level 4 introduced the system-ui keyword that resolves to the OS's default UI font on any platform — the right choice for native-feeling apps. The reference shows both system-ui and the manually-written equivalent stack for browsers that lack support.
Examples
- System UI sans-serif →
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;. - Modern serif →
font-family: Georgia, 'Times New Roman', serif;. - Monospace for code →
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;. - Apple-only stack →
font-family: -apple-system, sans-serif;.
FAQ
Should I use Arial or Helvetica?
Both. Stack them: font-family: Helvetica, Arial, sans-serif;. Mac users get Helvetica; everyone else gets Arial.
Why not just use Helvetica?
Helvetica is not installed on Windows. Always include Arial as a fallback for non-Apple platforms.
Does system-ui work in every browser?
Yes in modern browsers. Provide the manual stack for older versions and the generic sans-serif at the end as the universal fallback.
Is using a system font better for performance?
Yes — zero network requests, instant render, no FOIT or FOUT. The tradeoff is brand consistency, since the rendered font differs per OS.