How to get Puppeteer to display Emojis 🐻🙂

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 □
by Jon Yongfook · November 2021

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!

    About the authorJon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    FFmpeg 101: Top 10 Command Options You Need to Know (with Examples)

    FFmpeg is a complete, cross-platform solution to edit media files programatically. With hundreds of command options available, it is easy to feel overwhelmed. In this article, we’ll go through 10 essential FFmpeg options you should know.

    How to Create an Image Slider in HTML, CSS, and Javascript

    Many JavaScript image slider libraries are available but which is the best for your project? Instead of using an external library, let's create one from scratch using simple HTML, CSS, and JavaScript.

    6 Pro Tips for Optimizing Web Automation Using Puppeteer

    Using Puppeteer to automate web browser-related tasks is a great way to speed up your work as a developer. In this article, we have listed six tips that will help you optimize them.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to get Puppeteer to display Emojis 🐻🙂
    How to get Puppeteer to display Emojis 🐻🙂