Web Font Performance: The Special Challenge of Chinese Typefaces

The designer picks a beautiful Chinese typeface, the site launches, and the complaints roll in: "the text takes seconds to appear" or "the fonts jump the moment the page opens." That's not the designer's fault — it's an inherent challenge of Chinese web pages: an English font fits 26 letters in a few dozen KB, while a Chinese font covering the commonly used characters runs to over ten thousand glyphs, with files routinely 3MB to 10MB — the equivalent of forcing every visitor to download several high-resolution photos before they can start reading your content.

The websites we build serve the Taiwan market first, so Chinese font performance is a trade-off every project has to face. This article lays out the three paths — subsetting, sliced loading, and system fonts — to help you find your own position between "brand feel" and "speed."

Why Chinese Fonts Are So Heavy

A complete Traditional Chinese font must cover the Ministry of Education's common and secondary character sets, plus punctuation and symbols — easily topping ten thousand glyphs. Each character is a set of vector outline data, and the total starts at several MB. Worse is the experience during loading: the browser either hides text until the font arrives (a blank flash) or shows a fallback font and swaps it once loaded (font jumping). The former makes people think the site is broken; the latter causes layout shift. Both directly damage performance metrics and reading experience — they're the usual culprits behind LCP and CLS problems in Core Web Vitals.

Solution 1: Subsetting — Ship Only the Characters You Use

Subsetting means deleting unused glyphs from the font file, keeping only the characters that actually appear on the site. Two approaches:

• Static subsetting: suits fixed content — for example, a special typeface used only in headings. Extract the few hundred characters your headings use into a small font file, and 5MB often compresses to under 100KB. The effect is immediate.
• Dynamic subsetting: a site whose content keeps growing (blog, e-commerce) can't predict which characters it will need. Google Fonts' Chinese typefaces like Noto Sans TC use a "slicing" strategy — splitting the font by usage frequency into hundreds of small files, so the browser downloads only the slices a page actually needs. Paid services like justfont offer similar dynamic subsetting technology.

Our practical recommendation: use the brand typeface only for headings and key visuals, and hand body text to system fonts. Headings use a limited character set that static subsetting can handle; body text in system fonts costs zero download. This is the compromise we use most — brand feel preserved, speed preserved.

Type is the brand's voice, but visitors have to wait for it before they can hear it. 5MB of beauty is worth less than 100KB of just-right.

Solution 2: Honestly Consider System Fonts

System fonts are the typefaces built into the device: PingFang on Apple devices, Microsoft JhengHei on Windows, Noto Sans on Android. Using them means zero download, zero blank flash, zero jumping — and these fonts are genuinely high quality. The cost is slight visual differences across devices, and "looking like everyone else."

Our honest advice: for the vast majority of corporate sites and e-commerce, system fonts for body text are an entirely reasonable choice — visitors won't notice, and the speed gains are real. The sites that genuinely need self-hosted body fonts are usually publishing and design brands with strong typographic convictions — and they should pay the engineering cost of subsetting for it, not just dump a full font file into production.

Solution 3: Loading Strategy to Minimize the Damage

Whichever font approach you take, these technical details should all be done:

1. Use WOFF2: currently the best-compressed web font format, over 30% smaller than older formats.
2. Set font-display: swap: show content in a fallback font first, swap when the font loads, so visitors can always read the text. Pair it with a fallback of similar character width to minimize layout shift on swap.
3. Preload critical fonts: use preload hints so the browser prioritizes the font file used by above-the-fold headings, shortening the swap window.
4. Self-host with long cache headers: font files almost never change, so a one-year cache is appropriate — returning visitors pay nothing.

A Decision Order You Can Copy Directly

With limited budget and schedule, decide in this order: body text on system fonts first; brand heading font with static subsetting, WOFF2, and preload; if content later grows to where even heading characters become unpredictable, upgrade to a dynamic subsetting service. This combination keeps a Chinese-language site's font cost within a few hundred KB while retaining its personality.

Font performance is the most overlooked yet most easily won optimization for Taiwan websites. Our brand website design and development service settles the font strategy alongside the visual design at the design stage — so "we found out at launch the homepage is 8MB" never happens.