Installing a Pinyin-enhanced Chinese character font in Google Chrome

May 04, 2025

I didn’t find a full guide online, so wanted to write one for how to easily set up a font that adds pinyin to Chinese characters to help learn. This specifically applies to my preferred setup (running Chrome on a Macbook).

1. Download .ttf file

Download this font file that combines pinyin with the characters: https://github.com/parlr/hanzi-pinyin-font/blob/master/Hanzi-Pinyin-Font.top.ttf

2. Upload to Font Book

Font Book is pre-installed on Mac. Open it up, go to “My fonts”, and drag into it the .ttf file downloaded in the previous step. It will then show up as something like “Hanzi-Pinyin-Font.”

3. Apply the font in Google Chrome

In the Chrome settings (chrome://settings/) go to Appearance, click on “Customize fonts” and under the “Standard font” select your new font, e.g. “Hanzi-Pinyin-Font”.

4. Test out the new font

After a little delay, you should start to see the new font, like in the image below. One drawback is now the characters are smaller, and so the standard size was hard to read, so I increased the default font size to 20 to make it more visible. This should apply to captions on YouTube, Netflix, and more.

Pinyin-enhanced captions for watching 家有儿女 on the Dong Chinese site.