CJK Font Optimization Guide

The CJK Font Size Challenge

The sheer number of characters in CJK writing systems is the root cause of large font files. Each ideograph or syllable block requires its own set of vector outlines, hinting instructions, and metric data. When you multiply that per-glyph overhead by tens of thousands of glyphs, file sizes balloon to levels that are completely impractical to download in one request.

The numbers above illustrate why naively serving a full CJK font is untenable. A 6MB WOFF2 file on a 4G connection with 20Mbps throughput takes roughly 2.4 seconds just to download—before rendering begins. On congested networks or slower connections common in developing markets (key audiences for Chinese and Korean web content), that becomes 10-15 seconds.

Subsetting Strategies for CJK

Subsetting removes glyphs from a font file, keeping only the characters your content actually uses. For CJK, there are three main subsetting strategies, each with different trade-offs between file size and character coverage risk.

# Install fonttools
pip install fonttools brotli

# Subset to top 3000 Chinese characters from a Unicode list file
# (top3000-chinese.txt contains one Unicode codepoint per line, e.g. U+4E2D)
pyftsubset NotoSansSC-Regular.ttf \
  --unicodes-file=top3000-chinese.txt \
  --output-file=NotoSansSC-3000-Regular.ttf \
  --flavor=woff2 \
  --layout-features="*"

# Result: ~300-500KB WOFF2 vs 6MB original

# Subset by specifying a text sample (characters actually used in your content)
pyftsubset NotoSansSC-Regular.ttf \
  --text-file=your-content-sample.txt \
  --output-file=NotoSansSC-content-subset.woff2 \
  --flavor=woff2 \
  --layout-features="*"

# Subset to core CJK Unified Ideographs block only
pyftsubset NotoSansSC-Regular.ttf \
  --unicodes="U+4E00-9FFF,U+3000-303F,U+FF00-FFEF" \
  --output-file=NotoSansSC-core-cjk.woff2 \
  --flavor=woff2

# Subset Japanese: hiragana + katakana + common kanji
pyftsubset NotoSansJP-Regular.ttf \
  --unicodes="U+3040-30FF,U+4E00-9FFF,U+FF00-FFEF,U+3000-303F" \
  --output-file=NotoSansJP-web.woff2 \
  --flavor=woff2

# Korean: Hangul syllables + compatibility jamo
pyftsubset NotoSansKR-Regular.ttf \
  --unicodes="U+AC00-D7AF,U+1100-11FF,U+3130-318F" \
  --output-file=NotoSansKR-web.woff2 \
  --flavor=woff2

# Extract unique characters from HTML files and create subset
# (glyphhanger is a Node.js tool that automates this)
npx glyphhanger http://localhost:3000 \
  --subset=NotoSansSC-Regular.ttf \
  --formats=woff2

# Or use Python to extract chars and pipe to pyftsubset
python3 -c "
import sys, re
text = open('content.txt').read()
chars = set(text)
print(','.join(f'U+{ord(c):04X}' for c in sorted(chars)))
" | xargs -I{} pyftsubset NotoSansSC-Regular.ttf \
  --unicodes={} \
  --output-file=content-subset.woff2 \
  --flavor=woff2

Unicode-Range Splitting

Rather than serving one large subset, you can split a CJK font into multiple smaller files and use the CSS unicode-range descriptor to declare which characters each file covers. The browser downloads only the slices containing characters actually present on the current page.

This technique is the foundation of how Google Fonts handles CJK, and you can replicate it with self-hosted fonts. The key insight is that a browser parsing a page with 500 unique Chinese characters needs data for those 500 characters only—not 22,000. By splitting into ~200-character slices, each page typically loads 3-8 small files (50-80KB each) instead of one enormous file.

/* Slice 1: Hiragana and Katakana (Japanese phonetic) */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-kana.woff2') format('woff2');
  unicode-range: U+3040-309F, U+30A0-30FF, U+FF00-FFEF;
}

/* Slice 2: Common CJK Ideographs (U+4E00-6FFF) */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-cjk-1.woff2') format('woff2');
  unicode-range: U+4E00-6FFF;
}

/* Slice 3: Common CJK Ideographs (U+7000-9FFF) */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-cjk-2.woff2') format('woff2');
  unicode-range: U+7000-9FFF;
}

/* Slice 4: CJK Extension A and punctuation */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-ext.woff2') format('woff2');
  unicode-range: U+3400-4DBF, U+3000-303F;
}

/* Use the font—browser fetches only relevant slices */
body:lang(ja) {
  font-family: 'Noto Sans JP', sans-serif;
}

#!/bin/bash
# Script to create unicode-range slices from a full CJK font

FONT="NotoSansJP-Regular.ttf"

# Kana slice
pyftsubset "$FONT" \
  --unicodes="U+3040-309F,U+30A0-30FF,U+FF00-FFEF,U+3000-303F" \
  --output-file="noto-jp-kana.woff2" --flavor=woff2

# CJK slice 1: U+4E00-6FFF
pyftsubset "$FONT" \
  --unicodes="U+4E00-6FFF" \
  --output-file="noto-jp-cjk1.woff2" --flavor=woff2

# CJK slice 2: U+7000-9FFF
pyftsubset "$FONT" \
  --unicodes="U+7000-9FFF" \
  --output-file="noto-jp-cjk2.woff2" --flavor=woff2

# Extension slice
pyftsubset "$FONT" \
  --unicodes="U+3400-4DBF" \
  --output-file="noto-jp-ext.woff2" --flavor=woff2

echo "Slice sizes:"
ls -lh noto-jp-*.woff2

Google Fonts CJK: Automatic Optimization

Google Fonts implements the most sophisticated CJK font optimization available without any manual configuration: it automatically generates 100 to 160 tiny unicode-range slices per CJK font, each containing roughly 100-200 characters. Each slice is a separately downloadable WOFF2 file, and the entire delivery is orchestrated via the CSS the Google Fonts API returns.

Google's slicing algorithm is not simply alphabetical—it is frequency-optimized, placing the most commonly used characters in the first slices so that most pages only need to download a small number of files. The infrastructure is also CDN-distributed globally, with aggressive HTTP/2 multiplexing so the 3-8 slice requests that a typical page triggers are fetched in a single connection round-trip.

<!-- HTML link tag -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">

<!-- Or load multiple CJK scripts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

/* [0] - Most common characters (Google Fonts auto-generated) */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanssc/v37/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9-anYmTzY.woff2)
       format('woff2');
  unicode-range: U+1fa0e, U+1fa13, U+1fa1e, U+1fa2f, U+1fa6c, ...;
}
/* [1] */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanssc/v37/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9-bnYmTzY.woff2)
       format('woff2');
  unicode-range: U+1f9e, U+1f9f, U+2001, U+20189, ...;
}
/* ... continues for 100+ more slices ... */

Self-Host vs CDN Trade-offs

The decision to self-host CJK fonts or use a CDN is more consequential than for Latin fonts due to the complexity of CJK optimization. Self-hosting gives full control but requires significant infrastructure work to match the optimization level Google Fonts provides automatically.

CJK Font Choices

The following are the most widely used CJK web fonts, covering the most common use cases across Chinese, Japanese, and Korean content:

Chinese vs Japanese vs Korean Differences

CJK is often treated as a monolithic category, but Chinese, Japanese, and Korean have significant differences that affect font selection, glyph rendering, and the critical HTML lang attribute. Using the wrong regional font variant for your language is a common mistake that produces subtly wrong typography.

<!-- HTML: Set language on the root element -->
<html lang="ja">  <!-- Japanese -->
<html lang="zh-Hans">  <!-- Simplified Chinese -->
<html lang="zh-Hant">  <!-- Traditional Chinese -->
<html lang="ko">  <!-- Korean -->

<!-- CSS: Target specific language with :lang() selector -->
:lang(ja) {
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
}
:lang(zh-Hans) {
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
}
:lang(zh-Hant) {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
}
:lang(ko) {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

Performance Benchmarks

The following benchmarks are based on a typical Chinese-language article page with approximately 800 unique Chinese characters, measured on a simulated 4G connection (20Mbps, 50ms RTT). Font loading time reflects only the CJK font bytes transferred, not total page load.

<!-- Preload the most common slice -->
<link rel="preload"
  href="/fonts/noto-sc-common.woff2"
  as="font"
  type="font/woff2"
  crossorigin>

@font-face {
  font-family: 'Noto Sans SC';
  /* swap = show system font immediately */
  font-display: swap;
  src: url(...) format('woff2');
}

Related Resources