unicode emojis not showing on Chrome

10.6k Views Asked by tim peterson At 14 February 2016 at 18:49

When I insert unicode emojis into a <span> using standard jQuery they don't appear with Chrome (v48), but do with Firefox (v43) and Safari (v9). Compare these screenshots:

CHROME:

FIREFOX:

Any explanation here?

Original Q&A

There are 4 best solutions below

tim peterson On 14 February 2016 at 20:32 BEST ANSWER

The issue is that the span had font-weight:bold. As soon as I put font-weight:normal, the emojis appeared.

Lucretius On 21 November 2020 at 09:43

It's actually because of the font weight. Set the font-weight to 200px

Leviyahu On 13 September 2023 at 17:06

[] Additionally, if one has this issue and it's not related to the font-weight property, you may need to specify the 'charset' attribute in your head tag;

<html>
    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <span></span>
    </body>
</html>

alex On 09 January 2024 at 08:46

The solution was indeed the combination of all the answers above.

Without the <meta charset utf-8" />, the emoji shows gibberish.

With font-weight: bold, it shows nothing.

With font-weight: 600 it shows bold.

Thanks a lot for asking and answering.

unicode emojis not showing on Chrome

There are 4 best solutions below

Related Questions in HTML

Related Questions in GOOGLE-CHROME

Related Questions in UNICODE

Related Questions in EMOJI

Related Questions in EMOJIONE

Trending Questions

Popular # Hahtags

Popular Questions