Japanese Font Family Specification
The Problem
Specifying font-family for Japanese websites is significantly more complex than for Latin-script sites. Simply writing sans-serif produces poor results — browsers fall back to system defaults that vary widely by OS and may render Japanese characters as ugly bitmapped fonts on older systems. There are several compounding challenges:
- Platform fragmentation: macOS ships with Hiragino fonts, Windows 10+ uses Yu Gothic, and Linux/Android relies on Noto Sans CJK. Each platform requires explicit font names to get good results.
- Japanese fonts contain Latin glyphs: Every Japanese font includes its own rendition of ASCII characters. If the Japanese font is listed first, all Latin text (English, numbers, symbols) gets rendered in the Japanese font's Latin variant — typically wider and less refined than dedicated Latin typefaces.
- Yu Gothic weight rendering bug: Yu Gothic on Windows renders with a hairline-thin stroke weight at
font-weight: normaldue to a Windows font mapping quirk. Without a workaround, Japanese text appears unnaturally light. - Web font size: A Japanese character set contains thousands of glyphs. Noto Sans JP weighs ~9MB uncompressed (TTF); even as WOFF2, a full character set is several MB — far too large for practical web font usage without subsetting or a variable font strategy.
The Solution
The modern approach uses a carefully ordered system font stack. The ordering principle is:
- Latin web font(s) first — so English text uses the intended typeface
- Japanese system fonts, platform by platform
sans-serifas the final catch-all
Platform Font Reference
| Platform | Recommended Font | Notes |
|---|---|---|
| macOS / iOS | "Hiragino Sans" | Default since macOS 10.11 El Capitan; 10 weight variants |
| macOS (compatibility) | "Hiragino Kaku Gothic ProN" | Older but widely supported; only 2 weights |
| Windows 10+ | "Yu Gothic UI" | UI variant with correct weight mapping |
| Windows 10 (fallback) | "Yu Gothic" | Original; renders thin at default weight |
| Windows Vista–8.1 | "Meiryo" | Legacy; no longer the default, include for old OS support |
| Linux / Android | "Noto Sans CJK JP" | Open source; packaged by most Linux distros |
| Android (Google Fonts) | "Noto Sans JP" | Subset version used on Android and via Google Fonts |
The Recommended Stack
body {
font-family:
/* 1. Latin web font (if loaded via @font-face or Google Fonts) */
'Inter',
/* 2. macOS / iOS — modern Hiragino (10 weights) */
'Hiragino Sans',
/* 3. Windows 10+ — "Yu Gothic UI" fixes the weight rendering bug */
'Yu Gothic UI',
'Yu Gothic',
/* 4. Older macOS / iOS compatibility */
'Hiragino Kaku Gothic ProN',
/* 5. Linux / Android */
'Noto Sans CJK JP',
'Noto Sans JP',
/* 6. Final fallback */
sans-serif;
}
Without a Latin Web Font
If you are not loading any Latin web fonts, drop step 1. The browser will use the Latin glyphs built into whichever Japanese font resolves first, which is acceptable but not ideal for branded typography:
body {
font-family:
'Hiragino Sans',
'Yu Gothic UI',
'Yu Gothic',
'Hiragino Kaku Gothic ProN',
'Noto Sans CJK JP',
'Noto Sans JP',
sans-serif;
}
The Yu Gothic Weight Fix
"Yu Gothic UI" is a UI-optimized variant of Yu Gothic included in Windows 10 and later. It maps font-weight values correctly, so font-weight: 400 renders at a readable stroke weight. The original "Yu Gothic" maps all weights below 700 to the lightest available variant, making body text appear hairline-thin.
Always list "Yu Gothic UI" before "Yu Gothic" in your stack:
/* Wrong — Yu Gothic renders thin at 400 on Windows */
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
/* Correct — Yu Gothic UI has proper weight mapping */
font-family: 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', sans-serif;
Code Examples
Recommended Stack in Action
Latin Font Ordering: Before vs After Japanese Fonts
Japanese fonts ship with their own Latin glyphs. Listing a Japanese font before your Latin font causes all ASCII characters to be rendered in the Japanese font's Latin variant — typically wider, with different spacing and stroke contrast. Always list Latin fonts first.
Font Weight Variations with Japanese Text
Japanese fonts support the same font-weight scale as Latin fonts, but behavior varies by OS font and weight availability. Hiragino Sans offers 10 weights (W0–W9), while Hiragino Kaku Gothic ProN only has 2 (W3, W6).
System Stack vs Minimal Fallback
This demo shows the difference between a comprehensive system stack and just relying on sans-serif. On most modern desktop browsers the result may look similar, but on Linux systems without good CJK font configuration, sans-serif can fall back to bitmap or poorly-shaped fonts.
Common AI Mistakes
- Omitting Japanese system fonts entirely — using only
system-ui, sans-serifwithout any Japanese font names, which leaves font selection entirely to the browser's default mapping and produces inconsistent results across platforms - Listing Japanese fonts before Latin fonts — causing English text, numbers, and punctuation to be rendered in the Japanese font's Latin glyph set rather than the intended Latin typeface
- Using
"Yu Gothic"without"Yu Gothic UI"— resulting in hairline-thin text on Windows 10 at normal weight;"Yu Gothic UI"must come first in the stack - Including
"Meiryo"as the primary Windows font — Meiryo was the default on Windows Vista and 7, but Yu Gothic has been the default since Windows 10; Meiryo should appear after Yu Gothic in a compatibility fallback position - Loading Japanese web fonts without subsetting — downloading full Noto Sans JP or similar (~9MB+) for every page, when system fonts would render just as well with zero download cost
- Using
italicstyle on Japanese text — Japanese fonts have no true italic variant; browsers apply a CSS oblique transform that makes characters look slanted and unnatural - Assuming Hiragino Kaku Gothic ProN is the modern macOS font —
"Hiragino Sans"(added in macOS 10.11) is the modern replacement with 10 weight variants vs ProN's 2; always list Hiragino Sans first
When to Use
Use the full system font stack for any Japanese-language website or web application where:
- The page contains Japanese text (body copy, headings, UI labels)
- You want consistent rendering across macOS, Windows, and Linux
- You are not loading a Japanese web font (the common case for performance)
Include a Latin web font first when:
- Your brand uses a specific Latin typeface (Inter, Noto Sans, Roboto, etc.)
- Consistent Latin rendering across platforms is important
- The web font is already being loaded for other reasons (variable fonts, etc.)
Load a Japanese web font (Noto Sans JP, BIZ UDPGothic, etc.) only when:
- Exact cross-platform visual consistency is required (print-quality design systems)
- You are using font subsetting or progressive loading strategies to control file size
- The design calls for a specific glyph style not available in system fonts