Chinese Web Fonts

  • date_range 07/06/2017 11:07 info

Recently I had to design a multilingual website which involves Chinese. Unlike English (or any Latin script based language), each Chinese character has its own meaning, which means a large character set is required. This causes Chinese fonts to be about 3-7 MB per font weight, which would greatly increase the load time. Therefore while Latin script languages have a plethora of web fonts that can be applied, the selection of Chinese fonts is rather limited.

Since my options are already limited, I opted to go for web safe Chinese fonts instead. Unfortunately even this is not well documented, until I came across this. I ended up using the following line:

font-family: (Insert your custom web fonts here), Arial, Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

You might note that all the Chinese fonts are listed towards the end. This is because the Latin characters in Chinese fonts are rendered quite badly (i.e. looks bad), so always remember to put your custom fonts right in front.