How to system fonts by os: macos, windows, android, ios, linux
- Step 1Decide whether you need one OS or all — For a public site, you don't know the visitor's OS — use the `all` scope, which interleaves every platform's lead font into one chain. Use a single OS scope only for a packaged app, a WebView, or a kiosk where you control the platform.
- Step 2Set the Style select to match the surface — Sans-serif for UI/body, Serif for prose, Monospace for code. The default per-OS font differs by style: Windows sans is Segoe UI, Windows serif is Cambria, Windows mono is Cascadia Code/Consolas.
- Step 3Set the OS select to the platform you're targeting — Pick `macOS`, `Windows`, `Linux`, `iOS`, or `Android`. macOS and iOS produce the same sans-serif chain (both San Francisco), so either gives you the Apple stack.
- Step 4Generate and read the lead font — Click **Generate**. The first name in the emitted list is the platform's default UI font for that style — that's the one that will normally render. Everything after it is a graceful fallback for older OS versions or missing fonts.
- Step 5Note the fallback chain length — The **Fonts in stack** metric shows how many names are in the chain. A shorter chain (Android sans = 4) means fewer fallbacks; a longer one (sans-serif All = 10) means broader coverage across platforms you didn't scope to.
- Step 6Copy the chain or use it as a reference — Use **Copy to clipboard** to take the exact `font-family` list, or just read it off the result panel as a lookup. The trailing generic family (`sans-serif`/`serif`/`monospace`) is always present as the last-resort fallback.
Default UI (sans-serif) font per OS
The lead font is what normally renders; the CSS token is how you reach it. These are the first names in the generator's sans-serif stack for each OS scope.
| OS | Default UI font | CSS token / lead name | Generator scope | Stack length |
|---|---|---|---|---|
| macOS | San Francisco | -apple-system, then BlinkMacSystemFont | mac | 5 |
| iOS | San Francisco | -apple-system, then BlinkMacSystemFont | ios | 5 |
| Windows | Segoe UI | "Segoe UI" (quoted) | windows | 5 |
| Android | Roboto | Roboto | android | 4 |
| Linux | Oxygen / Ubuntu / Cantarell (desktop-dependent) | Roboto, Oxygen, Ubuntu, Cantarell, … | linux | 7 |
| Cross-platform | best available per OS | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, … | all | 10 |
Serif and monospace defaults per OS
Lead serif and monospace names emitted for each single-OS scope. Apple and Linux differ noticeably from Windows.
| OS scope | Serif lead names | Monospace lead names |
|---|---|---|
mac | "Iowan Old Style", "Apple Garamond", Baskerville | ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco |
ios | "Iowan Old Style", Georgia | ui-monospace, "SF Mono", Menlo, Monaco |
windows | "Cambria", "Constantia", Georgia | "Cascadia Code", "Cascadia Mono", Consolas |
linux | "Liberation Serif", "DejaVu Serif", Georgia | "JetBrains Mono", "Fira Mono", "DejaVu Sans Mono" |
android | "Roboto Slab", Georgia | "Roboto Mono", "Droid Sans Mono", Consolas |
Why each fallback exists
The chains aren't arbitrary — each name covers a real OS, a real OS version, or an open-source distro.
| Name | Covers | Role |
|---|---|---|
-apple-system / BlinkMacSystemFont | Safari / Blink on macOS + iOS | Reaches San Francisco, which has no direct CSS name |
"Segoe UI" / Tahoma | Windows (modern / legacy) | Segoe UI since Vista; Tahoma for very old Windows |
Roboto | Android + modern Linux | Android default since 4.0; common on Chrome OS / Linux |
Oxygen / Ubuntu / Cantarell | KDE / Ubuntu / GNOME | Per-desktop Linux UI fonts |
"DejaVu Sans" / "Liberation Sans" | Most Linux installs | Near-universal open-source fallback |
"Helvetica Neue" / Arial / generic | everything else | Last-resort metric-compatible fallback |
Cookbook
The exact chain the generator emits for each OS scope, with the lead font called out. Use these as a copy-paste reference or to verify your hand-written stack matches the curated one.
macOS / iOS sans-serif (San Francisco)
ExampleBoth Apple scopes emit the same sans-serif chain. The -apple-system and BlinkMacSystemFont keywords reach San Francisco; "Helvetica Neue" and Arial cover pre-El-Capitan Macs.
/* scope: mac (identical to ios) */ --font-system-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; Lead font that renders: San Francisco (via -apple-system) Fonts in stack: 5
Windows sans-serif (Segoe UI)
ExampleSegoe UI must be quoted because of the space. Tahoma is the legacy-Windows fallback; the chain ends with Arial then the generic.
/* scope: windows */ --font-system-sans: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif; Lead font that renders: Segoe UI Fonts in stack: 5
Linux sans-serif (desktop-dependent)
ExampleLinux has no single default UI font, so the chain lists Roboto plus the three big desktop-environment fonts, then the DejaVu/Liberation open-source fallbacks that almost every distro ships.
/* scope: linux */ --font-system-sans: Roboto, Oxygen, Ubuntu, Cantarell, "DejaVu Sans", "Liberation Sans", sans-serif; First available wins per desktop: GNOME → Cantarell, KDE → Oxygen, Ubuntu → Ubuntu. Fonts in stack: 7
Windows monospace (Cascadia Code / Consolas)
ExampleFor code on Windows, the chain leads with the newer Cascadia Code, falls to Cascadia Mono, then the long-standing Consolas, then Courier New. Note there is no ui-monospace here — that keyword is only useful on Apple.
/* scope: windows, style: monospace */ --font-system-monospace: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace; Fonts in stack: 5
Cross-platform serif for prose
ExampleThe serif All chain blends Apple's Iowan Old Style, the older Droid Serif, and Source Serif Pro. Heads up: the first two names are unquoted despite spaces, and an emoji fallback trails the generic — quirks documented in the edge cases.
/* scope: all, style: serif */ --font-system-serif: Iowan Old Style, Apple Garamond, Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif, "Apple Color Emoji"; Fonts in stack: 9
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
macOS and iOS scopes emit identical sans-serif chains
ExpectedBoth reach San Francisco via the same keywords, so the mac and ios sans-serif stacks are byte-identical (-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif). The serif and monospace chains differ slightly (iOS drops a couple of fallbacks), but for sans-serif pick whichever scope reads clearer to you.
Linux has no single default UI font
ExpectedUnlike Windows or macOS, there is no one Linux UI font. The generator's Linux chain lists Roboto plus Oxygen (KDE), Ubuntu, and Cantarell (GNOME), then DejaVu/Liberation. Which one renders depends on the user's desktop environment and what's installed — the chain is a best-effort across the common distros.
`-apple-system` is ignored off Apple platforms
ExpectedOn Windows or Android, the -apple-system/BlinkMacSystemFont keywords match nothing and are skipped, so the All chain falls through to "Segoe UI"/Roboto. The keywords only do anything on Safari and Blink-on-Apple. This is why the All stack can list Apple keywords first without harming other platforms.
Segoe UI must be quoted
By design"Segoe UI" contains a space, so CSS requires quotes — the generator always quotes it. If you hand-type the stack and forget the quotes, the declaration can be misparsed. The same applies to "Helvetica Neue", "Courier New", "Cascadia Code", and the other multi-word names.
Android serif maps to Roboto Slab, not a true book serif
QuirkAndroid's serif lead is "Roboto Slab" — a slab serif, stylistically heavier than the Iowan/Cambria book serifs Apple/Windows use. If consistent prose styling across OSes matters more than using each platform's native serif, consider a single web serif font instead of the system serif stack.
`ui-monospace` only appears in monospace stacks
ExpectedThe generic ui-monospace keyword leads the Apple-relevant monospace chains. The sans-serif and serif stacks have no ui-sans-serif/ui-serif keyword. If you want those generic UI keywords for sans or serif, you must add them to the copied output yourself.
Some named fonts aren't guaranteed present
Best-effortNames like Oxygen, Cantarell, "JetBrains Mono", or "Fira Mono" only render if the user installed that desktop/font. That's why each chain ends with a near-universal fallback ("DejaVu Sans", Consolas, "Courier New") and the generic family. The lead name is the ideal, not a promise.
Windows mono leads with Cascadia, which is recent
Version-dependentCascadia Code/Mono shipped with Windows Terminal and newer Windows; older installs won't have it, so the chain falls to Consolas (present since Vista). The chain is ordered newest-best-first, oldest-reliable-last, which is the right fallback strategy for monospace on Windows.
Frequently asked questions
What is the default font on macOS and how do I use it in CSS?
macOS uses San Francisco, which has no direct CSS family name. Reach it with the -apple-system keyword (Safari) and BlinkMacSystemFont (Blink-based browsers on macOS). The generator's mac scope leads with both, so San Francisco renders and older Macs fall back to Helvetica Neue then Arial.
What's the default font on Windows?
Segoe UI for the UI, since Windows Vista. In CSS it must be quoted: "Segoe UI". The generator's windows sans-serif scope is "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif — Tahoma covers very old Windows.
What's the default font on Android?
Roboto, since Android 4.0 (Ice Cream Sandwich). The generator's android sans-serif scope is Roboto, "Helvetica Neue", Arial, sans-serif — the shortest of the per-OS chains at 4 entries, because Android's font situation is the most uniform.
Why does the Linux stack list so many fonts?
Because Linux has no single default UI font. Different desktops ship different fonts — Cantarell (GNOME), Oxygen (KDE), Ubuntu (Ubuntu). The chain lists all three plus Roboto and the DejaVu/Liberation open-source fonts almost every distro carries, so something sensible renders regardless of desktop.
Are the macOS and iOS stacks the same?
The sans-serif chains are identical — both reach San Francisco the same way. The serif and monospace chains differ slightly (iOS trims a couple of fallbacks). For body UI, picking mac or ios gives the same result.
What are the default serif fonts per OS?
Apple: Iowan Old Style. Windows: Cambria, then Constantia. Linux: Liberation Serif / DejaVu Serif. Android: Roboto Slab. They differ enough in style that for tightly consistent prose you may prefer one web serif over the native serif stack.
What are the default monospace fonts per OS?
Apple: SF Mono / Menlo (led by the ui-monospace keyword). Windows: Cascadia Code / Cascadia Mono / Consolas. Linux: JetBrains Mono / Fira Mono / DejaVu Sans Mono. Android: Roboto Mono / Droid Sans Mono. Each chain falls back to Courier New or the generic.
Is `ui-sans-serif` part of the sans-serif stack?
No. Only the monospace stacks include a ui-* generic keyword (ui-monospace). The sans-serif stacks start with -apple-system; the serif stacks start with named families. If you want ui-sans-serif/ui-serif, add them to the front of the copied output yourself.
Will a font I name actually be present on the user's machine?
The lead font usually is (San Francisco on Apple, Segoe UI on Windows, Roboto on Android). Distro-specific names like Oxygen or JetBrains Mono are best-effort — they render only if installed. That's why each chain ends with a near-universal fallback and the generic family.
Which OS scope should I pick for a normal website?
Use all. It interleaves each platform's lead font into one chain so the right one resolves wherever the page loads. Single-OS scopes are for packaged apps, WebViews, or kiosks where you know the platform in advance.
Do I need different stacks for dark mode?
Not for the family — system fonts render identically in light and dark. What can change is weight or letter-spacing for legibility on dark backgrounds. For that, see the Dark Mode Font Adjuster; the system stack family stays the same.
Can I turn these per-OS stacks into native app tokens?
This page and the generator output CSS. To emit the same OS-scoped stacks as Swift/Kotlin/Style Dictionary tokens, follow Generate System Font Stacks Programmatically, which drives the same data through the runner API.
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.