Chinese Text Displays in Different Sizes and Fonts: Troubleshooting Chinese Font Problems

This post is so long overdue, I had to pour coffee on it to induce labor.

Okay, here we go: if you’re just getting started with Chinese fonts in web design, this is a follow up to the Beginners Guide to Chinese Font-family Declarations, so maybe read that first? Anyway, after that post went live, I got a pile of questions about Chinese font issues, the most common of which was “halp, my Chinese fonts are displaying in a grab bag of weights, sizes and typefaces”. Let’s troubleshoot, shall we?

First, a diagnosis

Let’s make sure we’re talking about the same problem. Does your text look, I dunno, indecisive? It’s thick sometimes, it’s thin sometimes, it’s short, it’s tall, it can’t decide which appetizer to order? One guy that wrote in said he thought the font was corrupted.

Designing websites in Chinese: corrupted Chinese web fonts characters translation website WordPress

Chinese User Interface Design: Chinese in different sizes heights fonts

That’s the one.

WTF is Wrong?

Happily, this one’s easy: for one reason or another, your browser has been left to its own devices in terms of choosing which fonts to display. Your browser does not recall being paid to do that shit. This is happening because either:

You didn’t declare a font for Chinese at all

Yes, you do have to declare a Chinese font in your CSS. Otherwise, the browser is apt to make poor decisions in terms of which fonts to use. Don’t know how to do that? See the guide above.

You’ve declared a non-standard Chinese web font

You did pick a font, but you picked some rando typeface from lordknowswhere and declared it. Or you only declared a Mac font, and now you’re viewing the site on a PC and looks weird. See the above guide- you need to declare both the PC and Mac fonts for Chinese.

There’s a typo in your font declaration

You declared a standard Chinese web font, but ya spelled it wrong, ya dummy. Or there’s a semi-colon out of place, or an extra quote, you know the drill.

You’re using @font-face embedding or similar

Hey there, fancy pants. Using bleeding-edge font embedding with Chinese? I applaud your vim, but you may have chosen to embed a typeface that doesn’t include all the Chinese characters. Making a Chinese font is insanely time-consuming, so a lot of free Chinese fonts only include 2,000 or so of the most basic, common characters. If you hunted around online for a cool Chinese font (especially a free one), downloaded it, converted to an @font-face-ready file, and are finding that some of your characters are displayed in the new font, while some aren’t, it’s very likely that you simply chose a low-quality or incomplete font to embed. The browser is displaying some characters in the embedded font, and when it comes across a character that isn’t included in the embedded font, it’s displaying that in a fallback font, which probably looks way different. Same deal if you’re using a “demo” version of high-quality fonts.

You’re working with cray-cray Chinese content

Oh man, are you displaying like, ancient poetry, or Buddhist texts, or a translation of the Dead Sea Scrolls, or somesuch academic frippery? You may have hit a character that has fallen so far out of use that no modern Chinese font includes it. Modern professional typefaces usually include around 20,000 glyphs, and those work for the majority of content online today. But the Chinese language is thousands of years old, and there are thousands of characters that were used at one time or another that are no longer relevant, so even the professional modern fonts don’t bother including them. However, if this is the problem, you’re probably seeing blank squares, like this, rather than a hodgepodge of font weights and styles:

Chinese UI Design Blog: Chinese font bug different sizes and styles

Let me be the first to do what the internet does best and assure you that you’re not the only one with this problem. There is also:

  • Andrew West from Babelstone, who’s taken on the awesome and painstaking task of creating a font (Babelstone Han) that includes archaic and otherwise out of use characters.
  • The Chinese Text Project “is an online open-access digital library that makes pre-modern Chinese texts available to readers and researchers all around the world”. Since they’re working with super old content, fonts are a major issue. For now, the Chinese Text Project is simply asking users to download the Hanazono font, a Japanese font which contains 97,745 glyphs (ancient Japanese comes from ancient Chinese). They can do this because they’re presenting their texts in an academic context, and anyone who wants to read them is likely willing to do the extra work of downloading a font and installing it – a solution that would not be acceptable in most circumstances.

Run into any issues not covered here? Drop me a note.