Emoji Support

[styfle]

Hello 👋 This is a really great tool you built! 😄

I found a related issue (#4) but the solution is to add a custom font in the .fonts directory.

Which font would I use to get emoji support? Have you had any success with rendering emoji? 🤔

[j]

Built-in support for this would be pretty awesome.

[alixaxel]

@styfle I suppose Noto Emoji is what you need, specifically the Noto Color Emoji font.

I haven't had the need to use custom fonts yet, but if you try it, let me know how it goes. 😄

---

@j Even compressed, the TTF file is still over 7MB in size (no surprise there) and given that the main purpose of this package is to be as lightweight as possible, I'd rather delegate that choice to the end-user.

[styfle]

@alixaxel That Noto Color Emoji font worked, thanks! 🎉 🎉 🎉

If anyone is interested how to add this font, see these two pull requests (I missed a couple things on the first one 😉 )

vercel/og-image#52

vercel/og-image#54

(hint: adding to the .fonts directory is not enough)

[alixaxel]

@styfle Did you try adding the font under $HOME/.fonts/ and it didn't work?

[styfle]

@alixaxel No, I did not try that because that doesn’t work very nicely for local development (putting font files in the user’s home dir) and then deployment would require an additional build step to copy to the home dir.

[alixaxel]

@styfle Not sure if you still need it, but I figured the newest addition might be interesting to you:

https://github.com/alixaxel/chrome-aws-lambda#fonts

[styfle]

@alixaxel Thanks for adding that method!

I'm currently reading the file as base64 and injecting into css font-face.

With this new function, how do you specify the name of the font-face so that it can be used in css classes below?

[alixaxel]

@styfle Fonts have their font-face name encoded in the file itself (don't ask me specifics tho!).

[styfle]

@alixaxel Alright! I'll have to give this a try and see if it performs better than my css solution.

Does this only work with URLs or can I give it a relative path to the font file?

[alixaxel]

Just URLs (and HTTPS ones).

[ed-sparkes]

@styfle did you ever try the chromium.font method? i cant seem to get it to work, sometimes it seems to run fine but the font is not reflected, other times i get a symlink err ERREXIST or something,

[vvo]

For anyone still coming up here:

• as for fonts support, I've had better success in building my page with @font-face than trying to use chromium.font(). Mainly because the font would not be loaded on the first load but on successive loads..
• as for emoji support, the easiest is to build your page with https://github.com/twitter/twemoji

[clathrop]

@vvo Hey, I'm currently trying to get twemoji to load in a headless browser but as you mentioned, chromium.font() is not working with the ttf i've generated using the method here: https://github.com/mozilla/twemoji-colr.

For background, I've gotten the Noto Color Emoji to work but it is not widely supported for all emojis nor all PDF viewers.

So moving on to an @font-face & twemoji option like you suggested is my next bet. Question though, did you load the font face via cdn or load it from local file system in your build? Wondering exactly how you ended up setting up your solution. Thanks!

[vvo]

(I have no idea sorry)