6

I am trying to display emojis for a website messenger and all of the emojis display correctly except the Smiling Face emoji. Whats more bizarre is that I'm working on two websites and in one the emoji displays correctly and not on the other one. (its the same unicode) When i copy paste this emoji to skype I get ☺ displaying in the computer but on my cell phone skype app it displays the correct emoji so the unicode is correct for sure .

How can i make this emoji display in browser? Does it depend on certain font?

Xitcod13
  • 5,949
  • 9
  • 40
  • 81

3 Answers3

10

i had the same problem and was able to get it to work by setting the following as the font-family.

font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;

thesowismine
  • 880
  • 1
  • 7
  • 19
  • I think changing font-weight might also be important `font-weight: 400;` Since having certain values in certain fonts might make it not appear – Xitcod13 Jun 21 '19 at 23:36
2

Instead of ☺ (U+263A), which is non-fully-qualified, try to use ☺️ (U+263A U+FE0F) which is a fully-qualified emoji sequence (U+263A WHITE SMILING FACE followed by U+FE0F VARIATION SELECTOR-16).

You can get an exhaustive list of all fully-qualified and non-fully-qualified emoji sequences in the emoji-test.txt data file.

  • 1
    I copy pasted your second emoji but it changes nothing :/ – Xitcod13 Feb 19 '19 at 19:21
  • The emoji i originally have is displaying in one of the websites so there must be a way to make it display in the other website as well. It even displays on stackoverflow if you mouse over the title of the question in the question list. – Xitcod13 Feb 19 '19 at 19:55
1

So i have no idea why but setting the style property of font-weight to 200 makes the emote display correctly. 

font-weight: 200;
Xitcod13
  • 5,949
  • 9
  • 40
  • 81
  • What font did you use? (What font did the browser actually render?) – ssc-hrep3 Feb 19 '19 at 22:26
  • 1
    'San Francisco Text', sans-serif – Xitcod13 Feb 19 '19 at 22:35
  • It was rendering Helvetica but after i changed the font weight it started rendering Apple Color Emoji – Xitcod13 Feb 21 '19 at 20:09
  • Make sure to use all the relevant fonts when displaying emojis. Otherwise e.g. in Windows they'll look strange. – ssc-hrep3 Feb 21 '19 at 21:46
  • Can you give me a list of all the relevant fonts. Thats exactly what i was asking in this question. – Xitcod13 Feb 21 '19 at 22:20
  • I would probably refer to the font styles [emojipedia](https://emojipedia.org) is using in their copy/paste box: `font-weight: 400; font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol` – ssc-hrep3 Feb 21 '19 at 22:55