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 ·


    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 Automatically Create Translated Banner Graphics for Multilingual Websites Using GPT-4o and Bannerbear

    OpenAI’s advanced language models significantly enhances text-related tasks, especially with the GPT-4o. In this article, we’ll guide your through the steps of using GPT-4o and Bannerbear to automate the translation and generation of banner graphics in various languages for multilingual websites.

    How to Automatically Add Watermark to Instagram Reels For Reposting Using Bannerbear (Node.js Tutorial)

    Posting a mix of original and user-generated content, including properly credited reposts, can be an effective social media strategy for media companies to engage with their audience and keep their feed dynamic and interesting. Let's learn how to streamline this process using Bannerbear in Node.js!

    How to Automatically Add Personalized Images to Your Beehiiv Newsletter

    Learn how to enhance your Beehive newsletter with personalized images using Bannerbear. In this article, we will learn how to automatically add personalized images to Beehiiv newsletters to make the content more relevant and engaging for your subscribers.

    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 🐻🙂