I have the line
<link href="https:/ /fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
to display a nice font for Chinese characters, which looks like brushed hanzis, but i need to display also pinyin with tone.

Some accents are not available with this line in CSS : font-family: 'Ma Shan Zheng', cursive;

2 Answers 2


Pinyin-friendly sans serif faces at Google Fonts

As of January 9, 2018, Google Fonts had 848 font families, 134 of which are sans serif faces. Of those, 22 can handle Hanyu Pinyin with tone marks.


Find some pinyin text (or go to Google Translate and paste some Chinese text and copy the pinyin output) and paste it into the "Custom" text field of the Google Fonts page (Your sample text should contain all four tone marks.) Then scroll through the fonts and see which one can display the pinyin text without boxes. Those fonts should be safe.

A screenshot of what this should look like. If you see boxes instead of tonemarked letters, those fonts won't work.

enter image description here


I have to update this answer, because to go safe, you should make sure that your sample text contains all possible diacritic characters used for pinyin, using just any random text won't do. Since the critical part of pinyin is really just the glyphs that contain diacritic marks, instead of random sample text use this:


This should contain all four tones and the character ü (in neutral tone, though I can't name an actual character that would need it.)

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.