<p><a href="http://pinyin.info/news/2018/pinyin-friendly-sans-serif-faces-at-google-fonts/" rel="nofollow noreferrer">Pinyin-friendly sans serif faces at Google Fonts</a></p>
<blockquote>
<p>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.</p>
</blockquote>

CC BY-SA 4.0
2020-07-03T15:03:13.187Z
2020-07-03T15:03:13.187Z
Mou某
<p>Find some pinyin text (or go to Google Translate and paste some Chinese text and copy the pinyin output) and paste it into the &quot;Custom&quot; text field of the <a href="https://fonts.google.com" rel="nofollow noreferrer">Google Fonts page</a> (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.</p>
<p>A screenshot of <a href="https://fonts.google.com/?preview.text=L%C3%B9%20bi%C4%81n%20de%20y%C4%9Bhu%C4%81%20bu%20y%C3%A0o%20c%C7%8Ei&amp;preview.text_type=custom" rel="nofollow noreferrer">what this should look like</a>. If you see boxes instead of tonemarked letters, those fonts won't work.</p>
<p><a href="https://i.sstatic.net/DJSzu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/DJSzu.png" alt="enter image description here" /></a></p>
<hr />
<p>UPDATE</p>
<p>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:</p>
<pre><code>āēīōūǖáéíóúǘǎěǐǒǔǚàèìòùǜü
</code></pre>
<p>This should contain all four tones and the character ü (in neutral tone, though I can't name an actual character that would need it.)</p>
<p><a href="https://i.sstatic.net/Oursy.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Oursy.png" alt="enter image description here" /></a></p>

CC BY-SA 4.0
2020-07-03T15:43:48.130Z
2020-07-04T19:04:30.267Z
2020-07-04T19:04:30.267Z
imrek
<p>I have the line<br />
<code>&lt;link href=&quot;https:/   /fonts.googleapis.com/css2?family=Ma+Shan+Zheng&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;</code><br />
to display a nice font for Chinese characters, which looks like brushed hanzis, but i need to display also pinyin with tone.</p>
<p>Some accents are not available with this line in CSS : font-family: 'Ma Shan Zheng', cursive;</p>

<simplified-characters><pinyin><tones><websites>
To display a correct pinyin in a web page what font should i use
# To display a correct pinyin in a web page what font should i use

(Asked by: username_0 on 2020-07-03)

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;

**Tags:** simplified-characters, pinyin, tones, websites


---

## 2 answers

### Answer by username_1 on 2020-07-03. Score: 1

[Pinyin-friendly sans serif faces at Google Fonts](http://pinyin.info/news/2018/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.


---

### Answer by username_2 on 2020-07-03. Score: 1

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](https://fonts.google.com) (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](https://fonts.google.com/?preview.text=L%C3%B9%20bi%C4%81n%20de%20y%C4%9Bhu%C4%81%20bu%20y%C3%A0o%20c%C7%8Ei&preview.text_type=custom). If you see boxes instead of tonemarked letters, those fonts won't work.

[![enter image description here](https://i.sstatic.net/DJSzu.png)](https://i.sstatic.net/DJSzu.png)

---

UPDATE

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](https://i.sstatic.net/Oursy.png)](https://i.sstatic.net/Oursy.png)


---

