I embedded NotoEmoji and NotoColorEmoji in the epub file, and tweaked the css based on what you shared. But when I send the book to my Kobo, it still just shows up with blank spaces where the emojis should be.
This is my code currently:
CSS:
Code:
@font-face {
font-family: 'Noto Emoji';
font-weight: normal;
font-style: normal;
src: url('../Fonts/NotoEmoji-Regular.ttf');
}
@font-face {
font-family: 'Noto Emoji Color';
font-weight: normal;
font-style: normal;
src: url('../Fonts/NotoColorEmoji-Regular.ttf');
.emoji {
font-family: "Noto Emoji";
}
.emojicolor {
font-family: "Noto Emoji Color";
}
And in the main file:
Code:
<p>Testing out some text here!</p>
<p>The following is tagged for Noto Color Emoji: <span class="emojicolor">🙏😤😭✨🥺🥰</span></p>
<p>The following is tagged for Noto Regular Emoji: <span class="emoji">🙏😤😭✨🥺🥰</span></p>
Even with all of this, the only way I can get any emojis to display on the Kobo is if I set the main font for the whole document to Symbola or OpenSansEmoji (which as I mentioned are incomplete and display non-standard emojis).
To be honest this isn't a huge deal it's just bugging the heck out of me that I can't figure out how to make it work.