Font stack builder
Pick a font stack that looks good without downloading anything. Each card shows which font it actually uses on your device.
No stacks match that search.
@font-face generator
Detects weight and style and writes the CSS.
Open tool →Fallback font matcher
Stop text jumping when web fonts load.
Open tool →Fluid type scale
clamp() font sizes that scale smoothly.
Open tool →The WordPress plugin
Looking for the original Web Fonts Loader plugin? Find out where it lives now.
Plugin page →Quick answer: A font stack lists fonts in order of preference so the browser uses the first one installed on the visitor's device. Pick a stack below to get a good-looking typeface with no font files to download, which is fast and private. Each card shows which font it uses on your device.
Why use a system font stack?
- Fast. Nothing to download, so text renders immediately and cannot cause a layout shift from a late font.
- Native feel.
system-uiuses the operating system's own interface font. - Private. No request to a font CDN.
How to use a stack
Copy the CSS and apply it to body or a heading selector. Always end the stack with a generic family such as sans-serif or serif so there is a sensible fallback.
Frequently asked questions
What does system-ui do?
system-ui selects the operating system's default user interface font, such as San Francisco on Apple devices and Segoe UI on Windows.
Why do stacks end with sans-serif or serif?
The generic family is the last resort. If none of the named fonts is installed, the browser picks its default font of that type.
How can a stack look different on different devices?
Each device has different fonts installed. The browser uses the first installed font in the list, which is why the cards show the font used on your device.
Can I mix a web font with a stack?
Yes. Put your web font first, then a stack as the fallback, for example font-family: "My Font", system-ui, sans-serif.