[Bug]: Wrong font is used for some emojis

[ShGKme]

⚠️ This issue respects the following points: ⚠️

• [X] This is a bug, not a question or a configuration/webserver/proxy issue.
• [X] This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
• [X] Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• [X] I agree to follow Nextcloud's Code of Conduct.

Bug description

Originally created in https://github.com/nextcloud/talk-desktop/issues/416

Currently, font-family is set as

system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Here there is a combination of normal text fonts and emoji fonts. For some emojis from different part of unicode, for example, u26**, it results in using the wrong font.

For me, it uses Arial instead of Segoe Ui Emoji.

Probably, we should separate emoji fonts and set them not for all the text but for a specific unicode range, aka

@font-face {
  font-family: "EmojiFont";
  src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji");
  unicode-range: <all emoji ranges>
}

Steps to reproduce

1. Open comments
2. Choose the "smiling face" emoji in a native emoji picker (Don't use : picker, it doesn't have this smile). Alternatively, use the emoji picker in Talk.

   Windows native	Talk <NcEmojiPicker>

3. See empty face

Expected behavior

Beautiful emoji from Emoji font.

Nextcloud Server version

master

[st3iny]

This might be caused by using DejaVu Sans as the default font. It is known to overwrite some color emojis with ugly symbols and we use system-ui as the first font in the list.

Configuring your desktop environment to use another default font will fix the issue in this case.

Ref https://github.com/13rac1/emojione-color-font/issues/17 Ref https://github.com/NixOS/nixpkgs/issues/172412

[ShGKme]

This might be caused by using DejaVu Sans as the default font

For me Arial overrides the emoji.

Configuring your desktop environment

I can see this error on web, the screenshots above are from files comments, not Talk Desktop, if that is what you mean.

[st3iny]

Ahh, I see. So it is broken on Windows too? I thought this was a problem only on linux.

For me it was only broken on the talk desktop client.

I can see this error on web, the screenshots above are from files comments, not Talk Desktop, if that is what you mean.

I meant that it fixed the issue on my machine by just setting the default font of KDE to something other than DejaVu.

---

I agree that having a dedicated emoji font family rule would be nice though.

[skjnldsv]

@jancborchardt as you're used to the font stack discussion :)

[jancborchardt]

The suggestion by @ShGKme to limit the emoji fonts to specific ranges sounds good? I'm not more of an expert on font stacks than that. :D

[ShGKme]

The suggestion by @ShGKme to limit the emoji fonts to specific ranges sounds good?

Yep, his suggestion sounds good to me ⚆_⚆

[ShGKme]

I can apply the change if the suggestion is fine

[jancborchardt]

@ShGKme yes that wuold be great! ʕ·͡ᴥ·ʔ