Emojis look different in editor than in preview

Are emojis tied to themes?

The emojis I see in the picker match what I see in preview mode, but they all look very different in the editor. I’d like to keep things consistent if possible (I like the emojis in the editor better since they have outlines and are easier to see)

Yes, emoji are tied to themes. Their appearance depends on your OS and the font specified by the developer.

In your case, the editor seems to be using Microsoft’s emoji and the preview mode uses Twitter’s Tweemoji font.

You should be able to change that in the theme’s css by replacing/removing the reference to Tweetmoji.

2 Likes

Hi @macedotavares can you tell me a little bit more about how to go about doing this? I opened up my theme’s css file and did a ctrl f search for “emoji” or “Tweetmoji” but could not find anything. Is there a snippet I could insert instead that could override the preference for Tweetmoji in preview mode? Thank you :smiley:

Funny that I had this same query as @Spidrax relating to the same emojis! I suspect were both inspired by this same post on the forum :laughing:

Are you using the same theme as @Spidrax ? I don’t know what that is, anyway, but if I did I could take a look at the CSS and try to understand what’s going on.

I’m using a different theme (Clean Theme), interesting that him and I have the same question. Maybe this is in base Obsidian as well and both of our themes haven’t changed it? Here’s the CSS for my theme, it’s also available on the Obsidian community themes panel.

Clean theme.css (7.6 KB)

Thank you :bowing_man:

Edit: I tested the emojis on base Obsidian without any themes and, you are right, it’s the Windows emojis for both edit and preview! Now I’m trying to search if there’s a quick CSS snippet I can insert to override Twemoji and get me back to default

I finally got around to checking the theme I’m using (Nord) and there is no reference to emoji or Tweemoji.

@pattman , are you on Windows too? I’m on a Mac, and while testing both the Nord and Clean themes, those emoji look the same in edit and preview modes. This is the expected behaviour, I believe: the default OS font kicks in as a fallback whenever a font doesn’t have the emoji glyphs.

@Spidrax , do you have any (or both) of these fonts installed?

  • Hack Nerd Font
  • Source Code Pro

I do, but the Nord theme just wouldn’t load them properly and I was stuck with the default “Inter”.

This may take a while :woozy_face:

@macedotavares hmmmm the plot thickens… Yes, I’m on Windows as well. You’re right about the default behaviour because I can replicate it with base Obsidian.

I wonder what is causing the Twemoji to appear :thinking:

Do you have the emoji toolbar plugin enabled?

3 Likes

@pattman, disabling the emoji toolbar plugin makes both editor and preview display Microsoft’s emojis. It seems it’s the source of the disconnect.

Thanks!

3 Likes

Cool. So those Tweemoji were being injected by the plugin, right?

(I’m moving this to “Resolved Help”.)

Yes. The plugin config page even mentions Tweemoji.

I thought the plugin was enabling the pop-up emoji menu, but apparently not. I’m not sure what it does beyond just changing the emoji graphics in preview mode…

@Spidrax that did the trick!! Good spotting! Also thank you @macedotavares for the help on this :slight_smile:

1 Like

Emoji Toolbar has an option to turn off Twitter emoji support. This fixed the issue for me. Hope it helps someone.

1 Like