CODEWITHSUNDEEP
htmlcssgoogle-chromeunicodeemoji
glifchits
glifchits

Reputation: 703

Emoji only display on Chrome if I use "cursive" or "fantasy" font family

I'm having a perplexing issue with displaying emoji in Google Chrome. Emoji seem to render fine, but there is one case where no emoji render at all.

image is on the DOM

The image is on the DOM and in the HTML. The emoji renders in Chrome if I view the page source or open in the web inspector.

When I change the font-family of the div that contains the emoji, only font-family: cursive or font-family: fantasy actually make the emoji render.

after applying font-family: cursive

How can I get emoji to render without having to apply these fonts, and without relying on a 3rd party library? What could be going wrong here?

Upvotes: 2

Views: 291

Answers (1)

glifchits
glifchits

Reputation: 703

Emoji only seem to work with font-weight: normal. Applying this style to the div containing my emoji solved the problem.

Upvotes: 2

Related Questions