Optional's Guide to Custom Emoji in Obsidian

Twemoji in Obsidian

I've spent literal YEARS trying to change the way Obsidian renders Emoji, from the hideous Windows Emoji to the beautiful Twemoji. But this isn't a recipe, so let's get right to it!

Download the latest Twemoji font “in COLR/CPAL layered format” here (provided by Mozilla). Or the latest Noto Emoji from here. Once downloaded, right-click the font file and click “Install” (For Twemoji the file is Twemoji.Mozilla.ttf, for Noto it's fonts/NotoColorEmoji_WindowsCompatible.ttf).

Now that the font is installed on your Computer you have to tell Obsidian to use it. Refer to the image below for the following steps: Inside Obsidian open the DOM inspector by pressing Ctrl + Shift + i. Switch to the Elements-Tab and select the element that starts <body class="... (it should be one of the first). On the other half of the inspector make sure you're on the Styles-Tab. Under Filter search for “--font”.

Obsidian Inspector Guide

What we're looking for are the lines that define the theme-fonts. These might look different on your end, but here's what mine look like:

body {
    --font-text-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Ubuntu, sans-serif;
    --font-editor-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Ubuntu, sans-serif;
    --font-monospace-theme: 'JetBrains Mono', 'Fira Code', Menlo, SFMono-Regular, Consolas, 'Roboto Mono', monospace;
    --font-interface-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Ubuntu, sans-serif;
}

Copy these (yours) somewhere. You can now close the Obsidian console (again via Ctrl + Shift + i or the little x). Open your Obsidian Settings (default: Ctrl + ,), go to Appearance, scroll down to CSS Snippets and click the little folder icon. This opens up the Snippets Folder in Windows where you now create a file called something like twemoji.css (The name doesn't matter, the file extension .css does). Open that file in your favourite text editor and paste the CSS you found earlier. But also place 'Twemoji Mozilla' (or 'Noto Color Emoji' if you want that one) somewhere among the existing Fonts—right behind 'Segoe UI' is what works for me. So here is what it could look like:

body {
  --font-text-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Twemoji Mozilla', Roboto,
  Inter, Ubuntu, sans-serif;
  --font-editor-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Twemoji Mozilla', Roboto,
  Inter, Ubuntu, sans-serif;
  --font-monospace-theme: 'JetBrains Mono', 'Fira Code', Menlo, SFMono-Regular,
  Consolas, 'Roboto Mono', 'Twemoji Mozilla', monospace;
  --font-interface-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Twemoji Mozilla', Roboto,
  Inter, Ubuntu, sans-serif;
}

Enable the snippet. You can do that by saving your .css-file, going back to the Obsidian settings, back to Appearance > CSS Snippets. Hit the little refresh arrows and your new snippet should show up. Toggle it on. Then open a file with some emojis to test your snippet.

If it doesn't work as intended (the emojis are still the old font or the font of the regular text has also changed) try a different ordering of fonts. They get applied from left to right until one is able to provide the required glyph. You might have to play around with the ordering to get the desired results. Just saving the .css should get Obsidian to reload and re-apply the snippet, you don't need to restart it every time.

___ Reach out via Mastodon @Optional@dice.camp or shoot me an email