Puppeteer failed to render emojis when running in Ubuntu

Viewed 576

I have a script that uses puppeteer to take screenshot of DOM components and outputs an image. Everything works fine on MacOS but when I run this on Ubuntu the emojis become a rectangle. Does anyone know why is this happening?

  • MacOS: (where you can see a rocket emoji)

https://i.stack.imgur.com/HeCEf.png

  • Ubuntu: (emoji becomes a rectangle)

https://i.stack.imgur.com/v1qyV.png

2 Answers

Multiuple sources (1, 2, 3) suggest using fonts-noto-color-emoji font to remedy this on Ubuntu:

sudo apt install fonts-noto-color-emoji

Update: it is possible to do so starting with Ubuntu 18.04

If you happen to be using chrome-aws-lambda (i.e.: using a cloud function to execute Puppeteer), you can load the font right after instantiating the browser:

const chromium = require('chrome-aws-lambda');

const browser = // ...
await chromium.font('https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf');

However, note that the font is almost 10 MB. If instead of taking a screenshot you are generating a PDF, the output file size will increase significantly.

Related