Kanji in their Chinese shapes on your Japanese page
Japanese and Chinese share the code points of most kanji, but not their shapes. From W3C's Why use the language attribute?: speakers of these languages "expect the glyphs used to vary in small details from language to language", and, without explicit styling, some browsers "automatically assign appropriate fonts according to the language of the content". A Japanese page that says lang="en", or names a Chinese font, can show Japanese readers the Chinese shapes. To them it looks like a page made in China.
What it looks like
The same four characters, once marked lang="ja" and once lang="zh-CN", drawn by your browser in its own sans-serif font for each language:
| Japanese | 直 角 骨 令 |
|---|---|
| Chinese | 直 角 骨 令 |
In the Chinese 角, the middle stroke runs through the bottom; the Japanese 令 ends with a straight downward stroke, the Chinese one like マ. If both rows look the same to you, your device has only one of the two fonts.
Set the language
<html lang="ja">
Without it the browser falls back on its own settings. In Chrome on Windows 11 set to Japanese, text inside lang="en" came out in the Japanese shapes, which is why this goes unnoticed: what a reader sees depends on their device, not on your page.
A new Next.js app starts with <html lang="en"> in app/layout.tsx, and it stays there when you add Japanese. With next-intl, take it from the locale, as in next-intl's configuration:
import { getLocale } from "next-intl/server";
export default async function RootLayout({ children }) {
const locale = await getLocale();
return (
<html lang={locale}>
<body>{children}</body>
</html>
);
}
For Japanese inside an English page, mark the element: <span lang="ja">.
Don't name a Chinese font for everyone
A font named in font-family wins over the language. With lang="ja" and font-family: "Microsoft YaHei", sans-serif, Chrome on Windows 11 drew all four characters in the Chinese shapes. Templates often list "PingFang SC", "Microsoft YaHei" or "Noto Sans SC" for every language; move them under :lang(zh) (W3C's Styling using language attributes) and give Japanese its own list:
body {
font-family: Inter, sans-serif;
}
:lang(ja) {
font-family: Inter, "Hiragino Sans",
"Hiragino Kaku Gothic ProN",
"Yu Gothic Medium", "Yu Gothic",
Meiryo, sans-serif;
}
:lang(zh) {
font-family: Inter, "PingFang SC",
"Microsoft YaHei", sans-serif;
}
- Your Latin font first. It has no kanji, so English words and numbers keep your font and the kanji fall through to the next one.
- Hiragino is the Japanese font on Mac and iPhone (Apple's fonts included with macOS Tahoe).
- Yu Gothic and Meiryo come with Windows (Microsoft's Yu Gothic and Meiryo).
"Yu Gothic"alone drew noticeably thinner than Meiryo in Chrome on Windows 11;"Yu Gothic Medium"before it gives a normal weight. - Everywhere else,
sans-serifwithlang="ja"leaves the choice of a Japanese font to the device.
The rest of a Japanese check
Shapes are what Japanese readers notice first, before they read a word. The same pass catches Enter while typing Japanese (the fix), yen charged 100 times over (the fix), headings that break in the middle of a word (the fix), postal codes rejected when typed in Japanese (the fix), dates saved one day early in Japan (the fix), address forms in the American order (the fix), phone numbers sent to +81 with the 0 still in (the fix), PDFs with the Japanese missing (the fix), search that finds nothing in Japanese (the fix), previews cut down to “...” in Japanese (the fix), lists sorted in the wrong order (the fix), email subjects that arrive garbled (the fix), CSV files that open garbled in Excel (the fix), Japanese titles that give an empty URL slug (the fix), file names garbled on upload and download (the fix), dates in the Japanese era that come out wrong (the fix), full-width spaces that get past your checks (the fix), public holidays your app gets wrong (the fix), and vertical text that comes out sideways or upside down (the fix).
Lesstep translates web apps into Japanese and delivers them as one pull request. In Complete (US$249), we set the language and a Japanese font stack without loading a heavy web font, and check every screen in Chrome and in WebKit. The first step is a free sample.
Mac and iPhone are trademarks of Apple Inc.; Windows is a trademark of Microsoft Corporation; Next.js is a trademark of Vercel, Inc. Font names are trademarks of their owners. This page is not affiliated with or endorsed by any of them.
More: Enter sends the message while typing Japanese · Stripe charges 100 times too much in yen · Japanese headings that break in the middle of a word · Forms that reject numbers typed in Japanese · Dates that come out wrong for Japanese users · Address forms in the Japanese order · Japanese phone numbers in forms · Japanese text missing from your PDFs · Search that finds nothing in Japanese · Length limits that break in Japanese · Japanese lists sorted in the wrong order · Japanese email subjects that arrive garbled · Japanese CSV files that open garbled in Excel · Japanese titles that give an empty URL slug · Japanese file names garbled on upload and download · Japanese era dates that come out wrong · Full-width spaces that get past your checks · Japanese public holidays your app gets wrong · Japanese vertical text that comes out sideways or upside down · Japanese localization checklist · Japanese localization for your web app