Build a font-family declaration that uses the best native font on each OS — San Francisco on Apple, Segoe UI on Windows, Roboto on Android. Zero web fonts, instant rendering.
Pick sans-serif, serif, or monospace, and a target OS scope
We assemble a font-family list in the right preference order with proper quoting
Copy the declaration — no @font-face, no preload, no FOIT
0 bytes uploaded. OS-Optimised System Font Stack Generator runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
Zero font download, instant render, native typography that matches every OS's UI, no GDPR/cookie concerns. Used by GitHub, Medium, Stack Overflow, and most major sites for body text.
Brand consistency. Your headlines look slightly different on macOS, Windows, and Android. Most teams accept this for body text and use a brand web font only for display sizes.
Yes. ui-sans-serif and ui-monospace are placed at the front of the stack — modern browsers resolve them to the OS UI font automatically.
Build a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open toolBuild a complete typography token system as CSS custom properties: --font-family, --font-size-{xs,sm,base,lg,xl}, --font-weight-{light,regular,bold}, --line-height-{tight,normal,relaxed}.
Open toolGenerate the right <link rel="preload"> tags for above-the-fold web fonts. Cuts LCP by 100–500 ms by starting the font fetch alongside the HTML parse.
Open tool