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 ·

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 Auto-Generate Subtitles/Closed Captions for Tiktok & Instagram

    In this article, we will walk you through the steps of using Bannerbear’s API to automatically generate and add closed captions to videos. This helps you to add an auto-captioning feature for videos to your video editing application easily.

    How to Add Accurate Text to AI Images Using Bannerbear

    Have you tried using AI to generate images with text on them and the results are not what you expected? In this article, we’ll learn how to use Bannerbear to add text to AI images automatically to overcome this limitation.

    8 Free Text-to-Image AI Generator to Try in 2024

    If you’re looking for a cost-effective text-to-image AI generator in 2024 for creating images for social media, blogs, e-commerce, or other purposes, consider these eight free options.

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