Several Emojis are superseded by Prism Theme with plain black and white emojis

[Rivol0gY]

I noticed that several emojis are not rendered by the OS but by the Prism theme with a plain black and white rendering. I checked with other themes and I do not have (completely) the issue. It looks like Prism theme is superseding several emojis by its own emojis:

For example, with the Default theme - the first tick and the fifth ticks are well rendered and the first lock is also well rendered:

I always noticed this issue so it is not Prism theme version or Obsidian version dependent but for the record, I'm using:

• Device type: PC
• OS: Windows 10 or 11
• Prism version: 3.5.1
• Color Schemes Used: Light Theme > Latte
• Obsidian Version: 1.5.12
• Obsidian Installer Version: 1.5.12

How is it possible to avoid this superseding and recover the OS's rendered emojis?

Thanks a lot for your understanding and please continue your nice work as this theme is marvellous! I only work with it since several months...

Cheers :)

[Rivol0gY]

Hi @damiankorcz,

I dug a little bit and the emojis limitation is due to "Source Sans" font you are using. If I'm "forcing" the default "Inter" font, it renders as per the default theme. If I'm "forcing" the "Segoe UI Emoji" font on Windows, all emojis are rendered perfectly.

So it is not a bug but... a feature of the text font you'are using.

I let choose how do you want to handle the "Source Sans" font "limitation".

[damiankorcz]

Hi @Rivol0gY, I've also had a deeper look into this and the fact that some of the emoji render differently is due to Source Sans and I'm able to mitigate it by strictly specifying the unicode-range in CSS when I define the font allowing me to avoid it from loading alternatives for some of the emoji already covered by system emoji fonts.

Also if you want a slightly better emoji support you can import Noto Color Emoji font in a CSS snippet and define it as a fallback font like so:

@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");

body {
    --font-interface-theme: "Source Sans 3", "Noto Color Emoji";
    --font-text-theme: "Source Sans 3", "Noto Color Emoji"; 
}

The font has full support of Unicode emoji specification 15.1 (as far as I can tell) meaning you have about ~3,782 emoji to chose from. I would also display some of the emoji that you showed as actual coloured emoji.

So yeah... hold out for the next update and it should be addressed!

[damiankorcz]

Hi @Rivol0gY , This issue should now be resolved in Prism 3.5.2. As mentioned above emoji should now fallback correctly. If you find any that aren't and you think they should, open another issue.

[Rivol0gY]

Hi @damiankorcz,

Really sorry to bother you, I had an internet issue and I discovered that my emojis were not displayed anymore. I tried to find a way to have a copy of the font locally in Obsidian... But it is really a nightmare...

I created a "fonts" folder into the folder ".obsidian", I download the ttf font here: https://fonts.google.com/noto/specimen/Noto+Color+Emoji

And from the snippet, I modify the @import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");

by @font-face { font-family: 'Noto Color Emoji'; src: url('fonts/NotoColorEmoji.ttf') format('truetype'); }

But I have, in the console, the following error: "GET app://obsidian.md/fonts/NotoColorEmoji.ttf net::ERR_FILE_NOT_FOUND" Of course, as I'm quite a newbie, I do not know what is the exact location of app://obsidian.md in my vault... But I tried to put the fonts folder at the vault's root but it does not work.

I tried with url('./fonts/NotoColorEmoji.ttf') format('truetype'); but it doesn't work too...

I put the "fonts" folder into the ".obsidian/snippets" folder and it doesn't work too...

I'm quite desperate here and... I'm pretty sure it is quite easy to point to a local font into Obsidian w/o having it installed on the system (here, a Win 11).

Thanks a lot for the help!

Cheers,

[damiankorcz]

Hi @Rivol0gY, If I remember correctly loading local files was blocked by Electron or Obsidian due to the potential security issues. I think your remaining option is having a CSS snippet with the Noto Color Emoji font converted into a Base64 embed. Theoritacly this should work but when I've tried this myself it doesn't seem to. I'm guessing it's due to it resulting in a 32mb text file even code editors (VS Code and Subline Text) struggle with loading and displaying. Not really sure what other options you have.

[damiankorcz]

Ok I did actually managed to make it work. Not sure how well it will behave considering that a 32mb CSS file is a bit silly.

Noto Color Emoji Font Embed.zip

[Rivol0gY]

Thanks a lot. I also tried with https://hellogreg.github.io/woff2base/ for the conversion. But as you said, my Notepad++ was very very slow.

But in case of internet loss, it can help!

Thanks a lot. Now, I know that it is not possible to load a local file from a snippet.

Thank you very much!