CSS Font Stack Generator

What this tool does

The CSS Font Stack Generator builds a ready-to-paste font-family value from fonts that are already installed on your visitors’ devices. Pick a style, such as the native system UI font, a neo-grotesque like Inter and Helvetica, a transitional serif like Charter, or a code-friendly monospace, and the tool lists the best font on each platform in the right order.

The stacks follow the well-known Modern Font Stacks collection, plus the classic -apple-system, BlinkMacSystemFont, "Segoe UI" stack many sites still use. You can add fallbacks for Simplified Chinese, Traditional Chinese, Japanese, Korean, Arabic, Thai or Hindi text, and color emoji fonts at the end.

How to use it

1. Choose a Font stack. The preview on the left shows how it looks on the device you are using right now; you can edit its text to try your own words.
2. Choose Fonts for other scripts if your pages contain Chinese, Japanese, Korean, Arabic, Thai or Hindi text.
3. Turn Add emoji fonts on or off.
4. Pick an Output: a plain font-family declaration, a CSS custom property, a Tailwind fontFamily entry, or a plain list.
5. Copy the result or download it as a .css file.

Names that contain spaces or start with a digit are quoted automatically; CSS keywords such as system-ui and sans-serif are never quoted, because quoting them would turn them into font names that do not exist.

Example

System UI with Simplified Chinese fallbacks:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Tips

• Use one stack for body text and a monospace stack for code: two system stacks cost nothing to load.
• The preview depends on the fonts installed on your own device, so check the page on Windows and a phone too.
• If you later add a web font, put it first in the list and keep the system stack as the fallback.