javascripthtmlcsssvgfonts

How to successfully use Noto Color Emoji Font on Safari Webkit in 2024

Do note: the Noto Color Emoji font works fine on Chrome

How does one correctly implement the Noto Color Emoji Font for a project for a Safari Webkit Browser?

I have been searching the web for an answer to this question for a long time now and could not come up with a single solution to get the Noto Color Emoji Font to work on Safari Webkit. There always seem to be some small or big issues that arise. In this question I want to clearly summarize all the approaches that I have tried or found online in this post an I am looking for one final way that finally makes this work.

Approach #1: use the google-generated woff2 file

use the woff2 file generated by this link: https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&text=👇⌨️🔠⚡️❌✅🏆💡🌎📋🇺🇳⭐️🏙️🌳🌐📸❓

-> Issue with approach #1:

The issue can be observed on this website, on Safari:

https://fonts.google.com/noto/specimen/Noto+Color+Emoji/glyphs

Two issues with this approach actually:

  1. Upon rendering, the native IOS font shows up first for a few seconds, then later the noto color font shows up. This is unacceptable for my use case
  2. This is actually way worse: When scrolling or resizing the window or highlighting emojis on the page, they suddenly disappear randomly, become invisible
  3. the app also lags a lot when rendering those emojis. Simply because safari does not support this format yet.

Approach #2: use the font file from the nanoemoji sbix conversion

You can use nanoemoji: https://github.com/googlefonts/nanoemoji To convert from the SVG folder to the sbix format.

There is even an example which shows this run live: https://emoji.julien-marcou.fr/

(source: https://github.com/googlefonts/noto-emoji/issues/438#issuecomment-2060887335)

-> Issue with approach #2:

Some emojis (~5%) still display the native styles, not the noto styles. Those emojis for example: ☄️ ☘️ 🎙️ 🖼️ 🛡️ ⛏️ ⚒️ 🛠️ 🗡️ ⚔️ 🏜️ 🏛️

Approach #3: use the font file from the nanoemoji COLRv0 format conversion

You could also convert to COLRv0 with nanoemoji. Safari supports this format too according to caniuse (not COLRv1 yet!).

-> Issue with approach #3:

This conversion fails when performing it on the whole svg folder. And then when converting only a few single emojis the conversion succeeeds but then they only show up in native macos styles, not in noto color styles.

Approach #4: Use Opentype SVG font:

One could use this font here: https://github.com/adobe-fonts/noto-emoji-svg

Like this:

@font-face {
  font-family: 'Noto Color Emoji';
  src:
url('https://github.com/adobe-fonts/noto-emoji-svg/releases/download/2.100/NotoColorEmoji-SVG.otf') format('opentype')
}

-> Issue with approach #4:

This is broken on safari. When I scroll emojis out of the viewport and then scroll them back in, they are then invisible. Happens especially when I have many emojis on my page.

Possible solutions:

The most promising solution would be if maybe someone by any chance has already succeeded at converting from Noto Color github repo to the COLRv0 format and can share the font file.

Or if someone knows why ~5% of emojis do not show up with the SBIX format and how to fix this then this would be a good solution, since other than that the SBIX format works super flawlessly on safari. We're 95% there, it almost fully works!

But actually I am mostly looking for alternative suggestions here, how one could display the Noto Color emojis on webkit, other solutions than using COLRv0, COLRv1, SBIX, or NotoColorEmoji-SVG.otf.

Solution

  • If you really want to use this exact font I would really advise simply using svgs instead. No more hassle around compatibility anywhere. No more different font sizes based on platform. This is especially easy if you do not have any emojis appearing dynamically in your app, e.g. an app wihout a dynamic chat.

    The Google Noto Color project is open source and free to use (even modify if I am not mistaken). You can copy the emojis from github.

    There is also the Figma noto emoji picker plugin, place all the emojis you need (all, if needed), rescale them all to 128x128, then batch export as svg. This way you also have the emoji names to be easily able to reference them. Then reference them inside <img> tags in your app.