CSS Font Stacks
Preview web-safe font stacks and copy the CSS you need.
Each stack lists fallbacks in order. The preview uses whichever of these fonts your own device has.
A font stack lists fallback fonts so your text still looks right when the first choice is missing. Preview each one with your own text.
Features
Use Cases: When This Tool Helps
-
Speed up websites with system fonts
Use fonts already on users' devices to avoid downloading web fonts.
-
Choose reliable fallbacks
Pick a stack that still looks good if your custom font fails to load.
-
Style Arabic websites
Find system font stacks that render Arabic text cleanly on Windows, Mac, and phones.
-
Pick code fonts
Choose monospace stacks for code blocks, terminals, and documentation.
-
Design HTML emails
Use safe font stacks that email clients support.
-
Prototype typography quickly
Compare serif, sans-serif, and display stacks with live previews before deciding.
How to Use
- Choose a group.
- Type your own preview text.
- Copy the CSS for the stack you like.
FAQ
What is a font stack?▾
It is an ordered list of fonts. The browser uses the first one available on the device.
Do these need font files?▾
No. They use fonts already installed on people's devices.