How to generate native system font stacks for sans, serif, mono
- Step 1Pick style and OS scope — Sans-serif is the modern default. Serif for editorial. Monospace for code. OS scope: 'all' covers every major OS in one stack; per-OS scopes produce shorter, tuned stacks.
- Step 2Copy the declaration — Output is a font-family list with proper quoting. Drop into body { font-family: ...; } or wrap in a CSS variable.
- Step 3Test across OSes — Render on macOS, Windows, Android, iOS, Linux. Each should pick a native font automatically. Quickly verifies the stack works as intended.
Frequently asked questions
What's the typical size saving?+
200–500 KB saved per page (vs shipping a custom web font with multiple weights). Used universally by performance-focused sites. The brand identity tradeoff: typography looks slightly different on every OS.
What about ui-sans-serif?+
ui-sans-serif and ui-monospace are CSS generic family keywords (added in 2020) that match the OS UI font directly. Modern browsers resolve them to the OS's UI font; fallback chains add coverage for older browsers.
When should I use a system stack?+
Body text on content-heavy sites where reading speed matters more than brand consistency. Pair with a custom web font for headings (small payload) for the best of both worlds.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.