Chrome is not displaying my emoji correctly

Question

I'm using Chrome Version 68.0.3440.106 (Official Build) (64-bit) on macOS Sierra 10.12.6.

I have the following code:

<div class="emoji">☺️</div>

It's rendering this:

Instead of this:

It only happens with this specific emoji. All others work fine. Why?

Jabberwocky

I'm having the opposite problem: #32915985 – Kelt

Answer 1

If you are a developer trying to fix that on your website try adding some font-family to emoji. This one worked for same issue I had.

  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;

If you are the user, you can install chrome extension which handles emojis chromoji

Bryozoan

Answer 2

I know that my answer is a bit late. But I've faced with the same problem and solve it through adding to my CSS file @font-face import. Also I've downloaded NotoColorEmoji font by Google. Here is page of this font. TrueType file is on it's github. So, after this even Chromium displays emojis on my site correctly.

Levitt

I see, however, you're limited to the Google emojis then or? Because the emojis are different on each platform. – Jabberwocky

Exactly. In that case I'm bounded the stack of symbols in the font. But it's enough for me : the ordinary bunch of emojis is in this one – Levitt

Thanks @SavelMtrx! Installing NotoColorEmoji font solved the emoticon problem with my Chrome browser. For those looking for help on how to install a font on Linux after downloading a TTF font, please refer to the instructions at unixtutorial.org/how-to-install-ttf-fonts-in-linux – Chatman

Answer 3

The CSS properties in this answer were a good attempt at making emoji "just work", but as the blog post The struggle of using native emoji on the web illustrates, it can have unintended side effects.

One problem is that the fonts treat special characters like #, * and numbers as emoji. So you need to be selective about which parts of the text have the font-family applied, and be sure the text is actually something that should be unconditionally treated as emoji.

Even if it does appear to work, the emoji that will be shown varies by OS and browser, so it's inconsistent at best.

Ultimately, I gave up on trying to make emoji work for my use case.

Girand