Skip to content
Free Commercial Fonts

Font Stack Playground

Stack fonts into one font-family and see how a mixed CJK/Latin paragraph renders. The browser picks, per character, the first font in the list that contains that glyph — so order directly affects how Latin and Chinese look.

Weight
Live preview
Design 設計 is a Journey 旅程, and Typography 字體 gives text 0123 its character.

Order comparison

Same text, two orderings — spot the difference.

Current order

Reversed order

Generated CSS

Why does order matter?

  • For each character, the browser scans the font-family list left to right and uses the first font that contains that glyph.
  • Chinese fonts usually ship Latin glyphs too, but they’re rarely as refined as a dedicated Latin typeface. So the common approach for mixed text is “Latin font first, Chinese font second”: Latin/digits use the nice Latin glyphs, Chinese falls back to the Chinese font.
  • Put the Chinese font first and Latin/digits will use that font’s Latin glyphs (often stiffer, sometimes full-width) — the difference is easy to see.
  • Always end with a generic fallback (e.g. sans-serif) so every environment has something to render.