Add emoji support in Node.js app

1

Hi, I’ve a Node.js app deployed on Render. I’m using Puppeteer to render some HTML content. By default the emoji’s are not displayed in the content even if I use Noto Emoji font from Google. Any workaround to make emojis show up?

2

Hey,

Are you referring to the emojis showing up in your service logs, or the emojis that should appear in the content on the site you’re deploying? Or is it something else?

Jérémy.
Render Support, UTC+3

3

Referring to the emojis in the content rendered by puppeteer in Nodejs app(not a site) deployed on Render. Instead of emojis only box shows up

for ex. the image below is generated with HTML/CSS using puppeteer, everything renders fine expect the emojis

67311
673111193×992 56.4 KB

Not in service logs, in service logs they show up fine

4

Hey,

This looks like a post on a social media site, and the Render platform doesn’t have any control over that. I don’t see how Render could be interfering here. What’s rendering is the page you’re accessing—not Node or Puppeteer. Node and Puppeteer process and create the data, but they aren’t rendering engines. The actual rendering is done by chrome, which displays the page or content you’ve sent a screenshot of based on the data you created. Have you checked your code, pipeline, etc., to ensure the data is being created correctly?

Jérémy.
Render Support, UTC+3

5

You’re right. The content you see in the screenshot is written in HTML CSS in a template I designed(not external URL). And that content is being passed to Puppeteer which is being rendered in Chrome

Now, since the environment hosted on Render doesn’t have a default font installed to render emojis it’s not being handled automatically. My question is is there any way to handle automatically, I don’t want to be installing a font or external package(which anyway seems unsupported on Render without dockerizing Install additional packages)

My assumption is the rendering engine, i.e Chrome is using the defaults of the Render machine the app is hosted on. And since the machine doesn’t have proper fonts installed, it’s not being handled. Please correct me if I’m wrong

6

Hey Rishi,

I think you’re partially right. The operating system, which is hosted on instances we provide, should be responsible for bringing in the fonts, but since this is rendered by Chrome, I’m not entirely sure where the responsibility lies. In any case, you could embed the emoji font, like ‘Noto Emoji,’ directly into your application via HTML/CSS:

@font-face { font-family: 'Noto Emoji'; src: url('https://example.com/path-to-noto-emoji-font.woff2') format('woff2');}body { font-family: 'Noto Emoji', sans-serif;}

… or your other option would be to move to a Docker environment, which would provide the freedom for you to install the system fonts that you want.

Jérémy.
Render Support, UTC+3