How to get Puppeteer to display Emojis 🐻🙂
Contents
You're trying to get a remote Puppeteer instance to show emojis when you do a screen capture… but they are showing up as a blank square □.
Thankfully, this is a common problem with a very simple solution.
Why does this happen?
The blank square character shows that there is a problem.
Unicode has two characters that indicate there is a problem with the text.
- □ (WHITE SQUARE, U+25A1): Replaces a missing or unsupported Unicode character
- � (REPLACEMENT CHARACTER, U+FFFD): Replaces an invalid character, often due to encoding conflicts
The latter is seen less often these days as the world has mostly converged on the unicode standard, but you will still see it if you work in a language that has multiple text encoding types e.g. Japanese
What does the blank square mean?
The blank square (or white square to give its official name) means that the character you are trying to display is not available in the fonts you have loaded.
You will most often see this if you are trying to do screenshots in Puppeteer of non-latin-character language websites such as Chinese, Japanese, Arabic etc that all require special fonts to be installed.
In the same way, you will see it if you try to do a screenshot in Puppeteer of a website using emojis, and you do not have any emoji fonts installed.
How to fix this issue
Simply install the fonts that Puppeteer (well, Chrome) needs to display the content. In the case of Chinese, Japanese, Arabic etc websites, install fonts in those languages.
For emojis you will need to install an emoji font.
A popular open source emoji font is Noto Color Emoji.
You will need access to the linux box that Puppeteer is running on, and then installing fonts should be as easy as dropping them into somewhere like /usr/share/fonts. Start up Puppeteer again and your fonts should now fill in the blank squares!
If you're using Puppeteer to do custom image generation in your app, try using Bannerbear instead! Your design team can set up templates, you get an API for the template, and we take care of the performance / scalability stuff!
