Picking a Traditional Chinese web font is now an accounting exercise
Choosing a Chinese typeface used to end at "which one looks better". In 2026 the pool of freely licensable Traditional Chinese open-source fonts is wide — Taipei Sans TC, jf open huninn and GenYoMin are all a download away — and designers hit the same wall right after: a Chinese character set runs into the tens of thousands of glyphs, so shipping the whole file costs your first screen several hundred kilobytes. A typeface decision is therefore three ledgers at once: licence, file weight, and the engineering hours that subsetting eats. This piece opens all three so the decision can be written into an acceptance checklist instead of left to taste.
Five real cases
- Google Fonts solves CJK by slicing, not compressing. Its own engineering write-up says Japanese was split so that the 3,000 most common characters sit in 20 slices, making clients download 80% fewer bytes than serving the whole font; the Korean strategy cut another 38% against the previous best. The load-bearing pieces are unicode-range, woff2 and HTTP/2.
- Adobe's Source Han Sans ships seven weights in several packagings — Super OTC, language-specific OTF, region-specific subset builds and variable fonts, some with WOFF2 supplied. Same typeface, order-of-magnitude difference in bytes depending on which package you grab.
- JT Foundry's Taipei Sans TC is a modification of Source Han Sans (Korean cut). The foundry states plainly that it is licensed under SIL Open Font License 1.1 and free for commercial use, but it distributes TTF only — the WOFF2 conversion and subsetting are yours to build.
- justfont runs both tracks. jf open huninn is OFL 1.1, covers roughly 2,700 characters including Bopomofo plus Taigi and Hakka romanisation — small set, small file, at the price of missing rare characters. The same studio sells a commercial web font service with free and paid tiers.
- GenYoMin, ButTaiwan's derivative of Source Han Serif, is OFL 1.1 and free commercially, and splits into a TW cut (modern Taiwanese glyph conventions) and a TC cut (traditional letterpress forms). Pick the wrong cut and the tone is wrong before a single word is read.
The logic underneath
Type shapes brand perception on two levels. The first is category convention: sans reads neutral and systemic, serif carries editorial authority, rounded reads friendly but informal. The second is quieter — glyph standards. Many usable Traditional Chinese fonts are derived from Japanese or Korean sources, and some strokes differ from the forms Taiwanese readers grew up with. Nobody says "that character uses the Japanese skeleton", but the small friction accumulates into a vague sense of unfamiliarity. Add timing: a loading strategy that hides body text first simply postpones the moment reading can begin.
Technical cost
web.dev notes Latin fonts usually carry 100 to 1,000 glyphs while CJK fonts may exceed 10,000 characters. The same guide states WOFF2 compresses about 30% better than WOFF, and that variable fonts "typically have larger file sizes than individual non-variable fonts that only contain one style" — so a Chinese variable font pays off only when three or more weights are genuinely in use.
Slicing has a precondition worth memorising: MDN puts it bluntly — if the page uses no character in the range the font is not downloaded, and if it uses at least one the whole file is. Slices that are too coarse are not slices.
Be honest about hours: turning an open-source TTF into production-ready sliced WOFF2 — auditing the character set, slicing, writing unicode-range, regression testing — lands in half a day to a day and a half in our projects. Fonts are not a direct ranking factor, but they are a routine source of poor LCP and of layout shift.
Suited vs not suited
| Worth a custom Chinese typeface | Start with system or hosted fonts |
|---|---|
| Brand sites and identity pages | Media, forums, UGC platforms |
| Campaign sites with fixed copy | Admin panels, SaaS UI, reporting views |
| Premium retail, dining, culture, design | E-commerce product pages (uncontrolled text) |
| Teams maintaining a design system | Teams with nobody to maintain subsetting |
How to apply it to your site
- Audit the character set. Separate fixed copy from dynamic content (CMS entries, product names, comments); dynamic text cannot be hard-subset.
- Clear the licence first. Establish whether it is OFL, perpetual or subscription, and file the terms with the project documents.
- Split headings from body. A display face for headings (small, precisely subsettable) plus Noto Sans TC or a system stack for body copy drops the cost by an order of magnitude.
- Convert and slice. Produce WOFF2 with fontTools' pyftsubset, slice by character frequency, and declare matching unicode-range in each @font-face.
- Set the loading strategy. Use font-display: swap for body text and align the fallback's metrics with size-adjust to limit the shift when the real font lands.
- Measure and record. Capture LCP and total font bytes before and after launch, and put the numbers in the acceptance checklist rather than claiming it "feels faster".
- ☐ Licence archived and confirmed to cover web embedding
- ☐ Dynamic content falls back to a system font, no tofu boxes
- ☐ All font files are WOFF2 and sliced
- ☐ Font bytes and LCP measured before and after
Common mistakes
- Uploading the whole TTF. Uncompressed and unsubset — the most common performance trap on Traditional Chinese sites.
- Hard-subsetting dynamic content. One rare character in a new comment or product name and the page falls back to a system font, or to empty boxes.
- Misreading OFL. Commercial use and modification are allowed, but redistribution of derivatives must keep the same licence, and the font itself cannot be sold as a product.
- Assuming variable is smaller. With a single weight in play, a Chinese variable font is a step backwards.
Further resources
- Google Fonts: Noto Sans TC — free and sliced, the least-effort starting point.
- fontTools pyftsubset docs — the reference for building your own subsetting pipeline.
- MDN: font-display — what each of the five loading strategies actually does.
FAQ
Can open-source fonts be used in client work?
Fonts under OFL 1.1 are free for commercial use, as Taipei Sans TC and jf open huninn both state. Derivatives you redistribute must keep the same licence, and the font file cannot be sold on its own.
Do Chinese web fonts slow a site down?
Unprocessed full files do. Convert to WOFF2, slice by character frequency and declare unicode-range so the browser fetches only the slices a page actually needs.
Must headings and body use the same typeface?
No, and splitting them is usually cheaper: headings subset precisely, body copy goes to Noto Sans TC or a system stack.
Is a Chinese variable font worth it?
It depends on weight count. web.dev notes variable fonts are typically larger than a single static style, so three or more weights in real use is the break-even point.
Turn the decision into a spec you can sign off
Typeface choice drives licence exposure, first-screen performance and long-term maintenance cost at the same time. If you are replatforming a brand site, or your current site is being dragged down by font files, we can audit the character set, design the subsetting pipeline, and write both the licence terms and the performance targets into the acceptance document.
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p