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.

    How to Use FFMpeg in Python (with Examples)

    Integrating FFmpeg's powerful media manipulation capabilities into your Python code becomes easy with the “ffmpeg-python” library. With a few lines of code, you can convert media formats, edit videos, extract audio, and more within your Python applications.

    How to Use Puppeteer in Node.js (with Examples)

    Puppeteer is a powerful Node.js library that allows you to control the browser programmatically. In this article, we will explore how to use Puppeteer, along with some practical examples like taking website screenshots, saving HTML content to PDF, and downloading images from a website.

    How to Overlay Text on an Image in HTML and CSS

    Learn how to overlay text on an image in HTML and CSS to create attention-grabbing images on your website.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

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