🔤
Font Stack Generator
Generate professional CSS font-family stacks for any design
Preset Font Stacks
System UI
Native system font for each OS
The quick brown fox jumps over the lazy dog
Apple System
Apple San Francisco font family
The quick brown fox jumps over the lazy dog
Windows System
Microsoft Segoe UI stack
The quick brown fox jumps over the lazy dog
Custom Font Stack
Preview Settings
Live Preview
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Font Family
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
Generated Code
/* CSS */
:root {
--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
font-family: var(--font-family);
}
/* Or directly: */
.element {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}Tips
- • Always include a generic fallback (sans-serif, serif, monospace)
- • Order fonts from most preferred to most available
- • Wrap multi-word font names in quotes
- • Use system-ui for native OS appearance
- • Test on multiple platforms for consistency