June 11, 2012

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese

Massive Google fail. Since days of searching have brought me no closer to answering my most pressing Chinese font questions, I bit the bullet and sat down to do some testing and write up my own guide in English for Western web and UI designers targeting users in China (yeah, all three of us).

Everything I’ve written here is the fruit of my own experiments and tests, so if you notice something I’ve missed, do write me a note at

First things first: What are the standard simplified Chinese web fonts?

Windows OS X
黑体:SimHei 冬青黑体: Hiragino Sans GB [NEW FOR SNOW LEOPARD]
宋体:SimSun 华文细黑:STHeiti Light [STXihei]
新宋体:NSimSun 华文黑体:STHeiti
仿宋:FangSong 华文楷体:STKaiti
楷体:KaiTi 华文宋体:STSong
仿宋_GB2312:FangSong_GB2312 华文仿宋:STFangsong
微软雅黑体:Microsoft YaHei [as of Win7]

Good Rules for Using Chinese fonts in CSS

Use the Chinese characters, and also spell out the font name

When declaring a Chinese font family, it’s typically a good idea to type out the romanization of the font (for example, “SimHei”) and declare the Chinese characters as a separate font in the same declaration. What this does is help reference the font file regardless of weather it’s been stored in the local system under its Chinese or western name – you’re covering all your bases here.


font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;

Declare English target fonts before Chinese target fonts

I’m sure someone’s come up with a standardized rule on this, but I’ve never seen one, so here’s mine: always declare all your target English fonts first. Why? Because English language fonts do not contain the glyphs for Chinese characters, but Chinese fonts do contain a-z characters. What that means is that if you declare your Chinese fonts before your English fonts, any English-language computer that has the standard Chinese font faces installed will display English characters using Chinese fonts, and let’s be honest, English letters in Chinese font families are fugly.

On the other hand, if you declare your English fonts first, Roman characters will be rendered in the first font, and Chinese characters will be displayed using the fall-back (Chinese) font. This should apply even if your site is mostly in Chinese or is targeting a wholly Chinese audience, because English characters will pop up in Chinese language sites as a matter of course – in usernames, for example.

Code example:

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

Declare the Microsoft font and the Mac font

Just like with English-language fonts, you should declare at least one Chinese font for Windows and one Chinese font for Mac (as with the Arial / Helvetica nonsense). Which one you declare first should depend first on the platform you’re targeting.

Do I have to put quotes around Chinese fonts in font declarations?

No. I asked for input on this and a few readers have responded. You do not need to do this:

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

You can do this:

font-family: Georgia, "Times New Roman", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif;

A look at the major Chinese fonts

宋体12号 – SimSun 12pt font

宋体, or SimSun, is by far the most commonly used base body font in Chinese web design. Personally, I dislike SimSun, in the same way many designers dislike Arial. It’s a bit heavy on the aggressively utilitarian boringness. But if what you’re looking for is the de-facto, big-uncool-websites-all-use-it Chinese font, you’ve found it. It looks like this:

Example site: Chinese video sharing site uses SimSun as base body font.

Declare that shit:
font-family: Arial, Helvetica, tahoma, verdana, 宋体, SimSun, 华文细黑, STXihei, sans-serif;

微软雅黑 – Microsoft YaHei

Microsoft YaHei is in my opinion, the Helvetica of the Chinese font world – it looks nice in most sizes (the Mac font equivalent is probably STXihei, the “light” version of STHeiTi). I find it’s modern, fresh and clean, and like a Rubenesque lady, is thick in all the right bits. It looks like this:

Example site: This very nice Baidu blog users MS Yahei as base body font. Astute Chinese reader and web developer DaiJie (check out his Chinese language blog, if you’re so inclined) points out that SimSun is the fall-back font for Microsoft YaHei, which was introduced as of Windows 7, and Yahei doesn’t display on older machines. He says:

“Yahei is installed on Windows7, but still 68% of Chinese ( users using WinXP. We fallback to SimHei usually, but it is not as good as Microsoft YaHei. SimHei and Yahei both look good at a large font size, but are not clear enough when the font size is below 16px. When font size is large than 16 px, SimSun looks ugly. So, [we commonly use] YaHei for the title font and SimSun for the body font.”

Declare that shit (updated to add Simsun fallback):

font-family: Tahoma, Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;

仿宋 – FangSong

FangSong is a relaxed, vaguely scripty font – maybe you could equate it to a Chinese serif. I feel that, like with many script fonts, it really does need a 14px base font size or above. It looks like this:

Declare that shit:

font-family: Georgia, "Times New Roman", "FangSong", "仿宋", STFangSong, "华文仿宋", serif;

楷体 – KaiTi

Kaiti is another script font that’s a little roomier than FangSong with slightly more shapely strokes (very slightly), and the character spacing is just a little bit wider. I find that Kaiti doesn’t do well below 14pt. It looks like this:

Declare that shit:

font-family: Georgia, "Times New Roman", "KaiTi", "楷体", STKaiti, "华文楷体", serif;

What’s the deal with Chinese characters and @font-face?

Considering that most Chinese font files are kinda ginormous and typically include at least 3000 base glyphs, Chinese doesn’t lend itself very well to @font-face embedding. Many of my non-standard Chinese fonts run upwards of 5MB, and the @font-face generator over at Font Squirrel has a 2MB file size limit. So, while it’s impractical on a CMS platform where you’re dealing with a bunch of user-generated data, that’s not to say it can’t be done.

You can use the CodeAndMore fontface generator to skip over Font Squrrel’s file size limit if you’re so inclined.

Typekit-style systems for Chinese fonts

[November 15, 2013 UPDATE:] There is another way. I just found out about a company called JustFont based out of Taiwan that offers a Typekit-style font hosting for Chinese @font-face style fonts. They’ve got a decent library of font options, both for simplified and traditional Chinese characters (less for Simplified characters, but that may change in time). Problem: they don’t have an English-language interface, so if you can’t work in Chinese, you’ll have a problem using the site. They do, however, offer Facebook sign-up, so you’ll be able to get that far at least.

[Sept 5, 2014 UPDATE:] Aaaand another one: This one is awesome – they have a much bigger font library than JustFont. My shop has tested these guys out, and for the most part, everything works well. They offer three embedding methods for their fonts, but only the webservice script really gives you similar usage freedom to @font-faceTwo issues that I’ve found: extra-thin fonts displayed at small sizes come out looking super ragged to the point of being unusable. And two, if you use their hosted service, there’s a little jump on page load – the page loads the content first then applies the font to it, so you see unstyled characters for a split second before the font settles into place.

What’s up with the new free font, Source Han Sans?

So, Adobe, who put out Source Sans (English) font a few years ago, teamed up with Google in summer 2014 to release Source Han Sans, the best thing to happen to Chinese web fonts basically ever. Though these fonts are not yet available as hosted fonts on English servers (desktop version only on Typekit and Google as of Dec 2014), the font is hosted on, under its Chinese font name, 思源黑体.  Best thing about this is that unlike most Chinese fonts, this one comes in 7 weights all the way from Extralight to Heavy – yeah, baby. I hope to see this on Google / Typekit as a hosted option soon.

And what about Noto Sans Hans?

Google is currently (Dec. 2014) working on a free font called “Noto Sans” (here’s the project page), which aims to support all the world’s languages. There are Chinese versions available for download, but these are not hosted on Google webfonts yet. The font’s lovely, though – you should get it. Google does offer an “Early Access Webfonts” page, where you can snag embedding code for experimental fonts. There are a couple of Traditional Chinese fonts there, but no Simplified fonts yet. A few versions of Noto Sans also support Pinyin.

What’s the deal with Google Fonts and China?

Mainland Chinese internet users are no longer able to connect to the Google Font API since the government blocked access to Google. Having a Google webfont on your Chinese website basically hangs the loading process for ages for users based in China as the site tries to render the font. Sometimes it works, mostly it fails. No one ever said life was fair.

[December 12, 2014 UPDATE:] So, Qihoo 360 is hosting a Google webfont mirror for Chinese users. If your site is only targeting China, you can use the Qihoo 360 mirror to load Google webfonts. If your site is targeting both China-based and non-China-based users, the recommendation is to load a script that decides which webfont source to use based on the user’s IP. Get the details on SEO Shifu.

Need a custom Chinese font or logotype made? These guys are hot-shit design-y Chinese typographers. And buy their ready-made fonts, they’re really cool.

What’s the difference between Big5 and GB2312 Chinese fonts?

Quick history lesson: About 50 years ago, Chairman Mao controlled mainland China. And he decided that literacy rates were super low because Chinese characters were crazy complicated to write. So he decided to “Simplify” the whole written language. He hired some linguists, they came up with a writing system that removed a ton of the strokes from many of the characters, reducing the complexity of written Chinese.

Problem: Mao’s little plan only effected the people in Mainland China. That means that all the Chinese people living outside of Mao’s sphere of influence – people in Taiwan and Hong Kong, and Chinese immigrants to the U.S. and abroad – didn’t adopt the new system at all. So now, Chinese characters can be written two ways. One way is the old way, “traditional characters”. Or, as we call it in fonts on the web, Big5. The other way is the new way, used only in China proper, “simplified characters”, or GB2312.

If you are choosing fonts for a site that targets mainland China, choose GB2312. If you are targeting Hong Kong, China towns abroad and immigrant communities, Taiwan, etc., use Big5. Most Chinese websites offer both on multi-lingual platforms. The fonts on this page are all GB2312, but most have Big5 versions.

(Dear type-A devs: yup, I know. I know what an encoding is. It’s just easier to explain this way, kthxbye.)

How to find more Chinese fonts on the web

The English web-o-verse is sadly lacking in Chinese font options, and because creating a Chinese font face is such a ridiculously huge undertaking, there are far less Chinese fonts than English ones. However, there are still quite a few. Best thing to do is pop over to Google or the Chinese search engine Baidu and have a search for:

中文字体 – Chinese Fonts
免费中文字体 – Free Chinese Fonts

Look for the characters 下载 – this means “download”.

  • Pingback: ??????????????@font-face??? | ~SolagirL~()

  • Pingback: ????????? - ??()

  • Pingback: ????????? | ???()

  • Pingback: ????????? « ??????????????()

  • Pingback: ???? » ?????????()

  • Pingback: sole?????()

  • Pingback: INHAO™? » ?????????()

  • Pingback: ???????????? | ????()

  • Pingback: Styling a Chinese language website | Web design Loughborough | Joke de WINTER()

  • Pingback: Kendra Schaefer’s Field Guide to Implementing Chinese Fonts in CSS | 八八吧 :: 88 Bar()

  • Pingback: 阮一峰:中文字体网页开发指南 - G3资讯网()

  • Pingback: Notes From Behind the Firewall: The State of Web Design in China()

  • Pingback: Notes From Behind the Firewall: The State of Web Design in China | MotionBump Reader()

  • Pingback: Notes From Behind the Firewall: The State of Web Design in China | Tech Tips()

  • neufsky

    Thanks for the write up, Kendra! Just want to give you a shout out because this is very useful information. I actually Evernoted it.

    One never realize how little they know about fonts until they need to make a website in both English and Chinese languages. What a headache!


  • 吴优华

    thanks for shaving

  • Kendra Schaefer

    My pleasure, thanks for the note.

  • Kendra Schaefer

    You’re very welcome. Things were getting a little bushy down there.

  • Ph Kunter

    Where can I get Source Hans Sans in China? Your comment “, under its Chinese font name, 思源黑体” is now perhaps invalid or incorrect, as that URL does not exist anymore. Any ideas? Thank you!

  • Kendra Schaefer

    Ohez noez! Looks like they’re down. Let’s cross our fingers that that’s temporary. In the meantime, check out Justfont.

  • Davis

    This is a pretty awesome article! It seems that 思源黑体 also comes with solid roman characters too:

    Quick question, any advice on a reliable static website host that reaches the mainland and works well with global visitors? We’ve narrowed our choice down to Rackspace Hongkong.

  • Alvin

    Thanks for this! I just spent hours digging around for Noto, good to see all the Chinese font choices laid out

  • Kendra Schaefer

    Not a bad choice – go with that.

  • SueC

    This is godsent. I have been wondering why my webpages look so ugly. Now i can try and fix it. Thank you, Kendra. Will come back and check out your travel posts. Sue

  • Felis

    I use microsoft YaHei for traditional Chinese pages as well. how YaHei handles bold is waaaaaaay better than the traditional Chinese JhengHei font. I also use Hiragino GB on OSX as well, these two “SC” fonts can actually display “TC” quite well.

  • 刘研 LiuYan

    For me, I really like the embedded bitmap fonts in SimSun (宋体 or 中易宋体), or other bitmap fonts. I use 12px-16px(9pt-12pt) bitmap fonts in any GUI. For linux system, I can write a fontconfig xml file to disable font antialiasing in 12px-16px size for vector fonts which has no embedded bitmap fonts.

  • ryanjohnsond

    You wrote to place the charters after the Western font, but where should I get characters like these 微软雅黑. E.g., “Microsoft Yahei”,”微软雅黑”. Is there a trusted source you go to, Kendra?

  • Kendra Schaefer

    Hi Ryan, not 100% sure what you mean, but you can snag the characters in the chart at the top of my post here. Do you mean for fonts that aren’t on that list?

  • ryanjohnsond

    Yes. Where did you originally obtain those characters? When I check my system fonts with those names, I only see the Western characters. also, do u have a lost of mobile native fonts?

  • Alvin

    Hi Kendra, I have a new Chinese font challenge. What do you do about fonts on mobile browsers (and I guess I just mean iOS and Android)?

    From my experiments and the googling I’ve done, it seems that we’re stuck on some (IMHO) fairly robotic looking fall back-fonts on these. And loading CJK fonts seems to be a huge 8mb at the least. How to do I get some nice Fangsong or Kaiti?

  • chenghuayang

    Nice article! I used justfont for my website, and didn’t notice that there’s another company providing the same service!
    I got one question here. How about different font-weight of one font? Like Huakang or Wending, some are different names in different font-weight. For instance, XX normal and XX bold are not in the same font-family in software like MS Word or Adobe Illustrator. So I have to use different font-family for different weights.
    However, YY normal and YY bold are in the same font-family, so we can specify different weight by using font-weight: 400 / 600 and the same font-family.
    Is this correct?

  • SocialChooozy

    Good to know, thanks

  • Mucc

    This is a fantastic website because I personally have researched and experienced similar problems for building a Chinese / English website. Currently, i still have some rare traditional font problems that I cannot solve, and I have emailed to your account. If you have time, may you please check it out and give me some light? Thank you so much!

  • Cain C.

    I am designing the UI for an intranet that gonna be used for a certain company in China, in case you don’t think this is complicated enough, I myself is a Chinese living in Canada. Chinese webfont has always been one of the biggest challenge i wanted to avoid.

    Just want you to know i am very very very grateful you made this post.

american tech writer living in beijing. chinese user interface consultant. crafter of pretty digital things. haver of nebulous ideas.
Call me, baby.
  • mobile: 186-111-67057 (china)