‼️ emoji looks different in composer & timeline from the way it looks in emoji picker

[Johennes]

Steps to reproduce

1. Hit CTRL + OPTION + SPACE to open the macOS emoji picker
2. Choose and insert ‼️

Outcome

What did you expect?

The emoji to look the same in the composer as it did in the picker.

What happened instead?

It looked like this:

Operating system

macOS

Application version

Element Desktop nightly

How did you install the app?

https://packages.element.io/nightly/

Homeserver

element.io / element.ems.host

Will you send logs?

No

[t3chguy]

For me it does look the same between the composer & timeline on macOS

Looks like the twemoji font styles them in this manner.

Used inspect element to inject that emoji into a tweet

https://github.com/twitter/twemoji is the repo for that font

[Johennes]

For me it does look the same between the composer & timeline on macOS

Sorry, what I meant is it looks different in the emoji picker (big red exclamation marks) to both the composer and timeline (normal black exclamation marks).

[t3chguy]

Right, well all emoji look different between your system picker and Element. One is using whatever system font, one is using your application font (Inter + Twemoji by default). Look at the gun emoji here for instance, one has a yellow circle, the other does not.

If you use the in-app picker then things match

This is either a design choice of Twemoji or an issue on their end

If you prefer your system emoji font you can go to Settings > Appearance > Advanced > Use system font and specify just Inter - that way your fallback default system font will cover emoji

[t3chguy]

Related #9790

[weeman1337]

Is this then somehow expected behaviour and not a defect?

[t3chguy]

It is really unknown, it could be a bug in Twemoji that the bangbang renders in a different colour to the single bang. Ultimately, the Design team picked Twemoji, its up to them whether this is fine as we're just delegating to Twemoji or whether they want to start a custom Element emoji font or switch to using system fonts for emoji

As for fonts looking different between different applications, it is very much intentional that Element Web & Desktop use Inter+Twemoji rather than your system font. So as the issue is phrased it might want closing/rephrasing.

[Johennes]

Ok, I see. I think this can be closed for now then. I initially considered it a bug because the inserted emoji looked so wildly different from what was in the picker. But that's the case for some others as well now that I look at it.

[t3chguy]

As I understand it, EX uses the system font for emoji so it might be worth asking design whether we should follow suit

[Johennes]

@rufuskahler WDYT?

[t3chguy]

We should probably maintain a common emoji font for SAS verification to ease users comparing emoji visually, but that doesn't mean we can't change the emoji font for the rest of the app

[rufuskahler]

CC @janogarcia ...