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.
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):
Download the Roboto font and install it in the FontBook app.
Relaunch the Obsidian app.
In Obsidian, go to Settings > Appearance > Text font.
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.
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.
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:
One of the problems on Linux is that Inter (listed as one of the default fonts above) does have some black unicode-variants. For example will be shown as (see 1st and 3rd emoji; they are black):
The solution is to use Roboto as main font (which does not have the any emojis, black or colorful) and Noto Color Emoji as the second font (which has only colorful emojis and is used as a fallback).
Emojis render correctly in Obsidian on Linux Mint, in preview view and live view.
Pity, when I export to PDF, emojis change to black spots. In my case, I prefer specific fonts when exporting a PDF, so switching to a emoji friendly font is less than optimal.
Thanks for sharing this thread, it helped clear up a few things for me about how emojis get rendered. I’ve also been exploring how TikTok emojis show up differently compared to standard Unicode ones, and it’s interesting to see the variations across platforms. These little differences really change how people express themselves online.
Man this really is a pain. I tried all the suggestions in this thread and the emojis are still rendered in black and white. It can’t really be this hard, especially since emojis work in every other application.
Fascinating how you can’t edit your post in this abomination of a forum software.
Anyway, this emoji situation is really dumb. After digging down in the developer tools I found out it has nothing to do with any of the suggestions in this thread, but Obsidian being deliberately programmed in a way to prefer black-and-white emojis. For what reason is beyond me, but for know, color emojis can be enforced with a CSS snippet like this:
Replace “ET Bembo” with the font you want to use for the text in the editor.
Note that setting an emoji font family is not required. It just works, as it should.
Note that f you, navigate with the developer tools to some text that contains emojis in your note and change the CSS style to some color emoji font family - Obsidian will revert it within seconds. So there must be scripts running that monitor this CSS property, but the snippet above works (for now).
I’m on macOS Tahoe. I tried the “Settings → Appearance → Text font → Roboto/Apple Color Emoji” workaround described above, and it worked, but I didn’t like the appearance of Roboto. So I replaced Roboto with the macOS system font, SF Pro. It’s built into macOS, of course, but it’s not normally user-selectable unless you download and install it separately…
(This is where I would insert the link, but the forum won’t let me. New user, spam prevention, I get it. Search for “Fonts for Apple platforms - Fonts - Apple Developer”.)
Everything now works as expected: the text is displayed in the system default font, and the emoji are displayed in their colorful variants.
Yes, sorry, I should have been more clear. I know SF Pro is the default system font, which is why I went looking for a downloadable version when I couldn’t find it in Font Book.
And it does have the Unicode emoji variants. If I change the “Text font” setting to remove Apple Color Emoji, so that SF Pro is the only one in the list, then it behaves as if I’d done nothing at all (i.e., the original bug).
So the workaround still works as described, I just replaced Roboto with SF Pro.
I have not needed to select SF Pro as the interface font in Obsidian. Just having the full SF Pro download (installed and the Mac rebooted) and Obsidian then loading it as the default font has sufficed to render emojis correctly, in colour.
, are rendered in black and white (as Unicode variants).
) is rendered incorrectly. it is rendered as if it is not FE0F combined. - chromium
will be shown as (see 1st and 3rd emoji; they are black):