How to replace all native emojis with beautiful ones like apple's in the Electronic app?

Question

In a regular web browser there are such naive emojis as in the photo:

My app runs on Electron and the emojis look exactly like this there. How can this be changed in favor of apple emoji? I can't use emojione and search everywhere for these emojis because there are hundreds of places in my application where users write these emojis themselves and I can't physically search everywhere for these emojis

Answer 1

The "right" solution is to use a font that provides Emojis you think fit your app best, but doesn't include any text so you can use your default font for text. Mind that you cannot just "use" Apple's Emojis because that would bring copyright implications for platforms that don't ship with them (ie, Windows and Linux).

Thus, I recommend to search for an Emoji font you can redistribute with your application ( with proper credit if needed by the font's licence).

If your current font chain is, for example:

* { font-family: "Roboto", "Arial", sans-serif; }

You could just go ahead, load your Emoji font (by using @font-face , for example) and prepend it to your font chain. If that font is loaded using the alias "my-emoji-font" , then this would look like:

* { font-family: "my-emoji-font", "Roboto", "Arial", sans-serif; }

However, you will have to make sure that the Emoji font does not include any non-Emoji symbols, as these would then also be taken from the Emoji font. Also, this will replace Emojis for any text in your application (thus the * as the CSS selector; you could of course write a CSS rule for specific elements as usual, but bear in mind that you'll have to copy the font chain).

If your Emoji font should lack any Emoji that is used by your application, Electron will display the corresponding Emoji from Roboto, Arial (in this example) or the system's sans-serif font if it's available there.