Some Emojis are rendered in black and white (as Unicode)

Some Emojis, such as :sunny::heart:, are rendered in black and white (as Unicode variants).
https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/.

  1. There is currently no way to force the emoji-variant rendering in CSS in chrome
    https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji
  2. You could use a font that doesn’t have Unicode variants, like Roboto (so emoji variants are the only possible ones).
  3. Try to use the variation selector U+FE0F
    https://forum.obsidian.md/t/font-problem-unicode-text-style-variant-selectors-don-t-work-most-of-the-time/19320
5 Likes

Can there be a bit more detail as to how to insert a red heart? Does the second method mean that first we need to change the font to Roboto, insert the emoji, then switch it back? I’m not clear about the third method mentioned. Thanks.

The thing is that even if I copy a red heart from the Internet, it still shows a black heart, which is a bit frustrating.

1 Like

I have observed this issue on Linux, and after root-causing it with my friend for a while we figured out it’s due to a Chromium bug (so it shows up in Google Chrome and also Electron apps like Obsidian, while if you try the same reproduction in Firefox, everything works correctly). A couple relevant reports (still open):

Per Mismatched emojis - #2 by heymarkreeves this is happening in the desktop app. Is that rendering using a browser engine? That distinction is going to be lost on most users. There’s an iPhone app and a macOS app, and what works on one isn’t working on the other. Note that Discourse’s emoji picker swaps entered symbols for its own.

I also experienced this problem. It seems that there are some limitations with Chrome and Electron when it comes to displaying emojis correctly. As a user, I wasn’t necessarily looking for a proper fix, but rather a workaround that would show all emojis properly. With the hint from @WhiteNoise and some trial and error, I found a solution that worked for me. Here’s what I did (on macOS 13.3):

  1. Download the Roboto font and install it in the FontBook app.
  2. Relaunch the Obsidian app.
  3. In Obsidian, go to Settings > Appearance > Text font.
  4. Set your font preferences to (1) Roboto (2) Apple Color Emoji.

By following these steps, I was able to resolve the issue and see all emojis properly. I hope this solution helps others who are facing the same problem.

4 Likes

It actually worked, thanks!

Note that the first two steps aren’t really necessary. All that’s necessary is to put the Apple Color Emoji font in second in the font list, and emojis will appear correctly.

3 Likes

The Obsidian attempts to utilize the following fonts (in this order):

  • BlinkMacSystemFont
  • Segoe UI
  • Roboto
  • Inter
  • Apple Color Emoji
  • Segoe UI Emoji
  • Segoe UI Symbol
  • Microsoft YaHei Light

Verify if these fonts are installed on your system.

When the fonts Apple Color Emoji and Segoe UI Emoji are unavailable, emojis display in monochrome.

To remedy this, you have two options: install these fonts, or incorporate the Noto Color Emoji font through Obsidian Settings → Appearance → Font.

A more permanent solution could involve the inclusion of Noto Color Emoji, commonly used in Linux distributions, in Obsidian’s default font selection to address this issue comprehensively.

These fonts are already installed on some systems:

  • MacOS: Apple Color Emoji
  • Windows: Segoe UI Emoji
  • Linux, commonly: Noto Color Emoji
1 Like