Non-Latin characters not showing in headless Chrome on Ubuntu Server

Question

When I visit a site in Chrome, it shows non-Latin characters just fine. However, when I run the same site in headless Chrome on Ubuntu Server and view the site via the debugger on port 9222, then all characters show as empty rectangles [].

This issue occurs for languages like Chinese, Indian, Arabic, etc.

The site uses the Liberation font and the site's header is set to the utf-8 charset. The Liberation font is both installed on Ubuntu Server and the font is loaded locally from the server's webroot as well using CSS. In regular Chrome this works flawlessly, but not in headless mode.

Apparently it's a known issue that headless Chrome can't display non-Latin characters by default out of the box, however I haven't been able to find any comprehensive solution for it so far.

How do I make non-Latin characters work in headless Chrome? Preferably with the Liberation font which I'm already using.

Answer 1

I have found a solution to the problem.

It appears that Chrome in headless mode needs specific fonts installed for non-Latin characters. While this can be solved of course by installing a multitude of fonts, it would be a headache to install fonts for websites that support a lot of languages.

Luckily there are modern font packs available that cover nearly all languages and scripts on earth. I have installed 3 font packs that now show non-Latin characters for a lot of languages. For India I installed a special font pack to cover all the languages and scripts in India. I also installed a special font pack that covers Chinese Simplified, Chinese Traditional, Japanese and Korean.

Here are the 3 font packs that solve the issue. From top to bottom, an Indian font pack, an international font pack and a font pack for China, Japan and Korea:

sudo apt-get install fonts-indic
sudo apt-get install fonts-noto
sudo apt-get install fonts-noto-cjk

Installing these font packs solves the problem. And it does so elegantly. The normal Latin fonts used in the website's code still work, however when characters for a particular language can't be found, then headless Chrome falls back on the newly installed font packs.