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

Bug reports
, ,
1

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
4 Likes
2

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
3

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):

4

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.

5

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.

1 Like
6

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.

1 Like