How to check if character isn't supported by the user's browser in JavaScript?

Question

I'm building a site that uses a lot of emojis. Kind of like the one's you're used to seeing when texting, or on Instagram, Facebook, etc.

Examples: 😄 😘 😂

Of course, not all of the emojis are supported by all the browsers out there. When they aren't then they show up as a square with a question mark in the middle like so:

Is there anyway in JavaScript that you can tell if a character is supported by the browser, or if it'll show up like the question mark above?

Answer 1

Browsers do not "support" displaying unicode characters, it's the font that is responsible. Of course, you can always directly include the font that you want to use to display the characters in the emoji section in Unicode with CSS.

Here is a free and open font that can display emojis.

In case you want to detect if a font exists, here is a tool for that.

Answer 2

As others have noted.. It's not the browser but the font.. So specify a font that supports all your emojis