Libra Colour Emojis and supplemental fonts

[star-soup]

I've been reading a downloaded fanfic on my kobo which includes emojis. With the default font, the emojis don't display at all. I've tried a few solutions with varying results, but am still looking for something better if anyone has found a good way to handle this.

What I've tried so far:

• Sideloading the NotoEmoji font, then setting the main font for the book to Kobo's default, and choosing NotoEmoji as a "supplementary" font. This results in no change from what I see when I don't have a supplementary font selected. It seems like it isn't referencing it at all.
• Setting the NotoEmoji font as the primary font for the book. This results in the emojis displaying... but the text being almost unreadable, with random dropped characters and weird spacing.
• Sideloading the free Symbola font and setting this as the main font for the book when I open it on my Kobo. This results in all the text and most of the emojis displaying, but the text font is pretty bad to look at and the emojis are nonstandard. Same for the OpenSansEmoji font. Most emojis display but there's still a bunch that show up as empty square boxes

The questions I'm currently wondering about based on these experiments:

• Is there a step I'm missing to get the kepub on my kobo to actually use the supplemental fonts I tell it I want it to reference?
• Is there a way to package an emoji font with the kepub in Calibre? I use Calibre to edit the metadata for all my sideloaded books but can't figure out how to embed a secondary font for the emojis

Thanks in advance for any help on this!

[Karellen]

You don't set the emoji font "as the primary font for the book".
You set the emoji font where the emojis are used.

Import the emoji font file into the ebook.
In your CSS you would then add this...

PHP Code:

@font-face {
  src: url(NotoEmoji-Regular.ttf);
  font-family: "Noto Emoji";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  }
.emoji {
  font-family: "Noto Emoji", sans-serif;
} 


Then in the body, you would have this...

PHP Code:

<span class="emoji">&#55357;�</span> 


[star-soup]

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:

@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:

 <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.

[Aleron Ives]

Did you set the primary font as Publisher Default? If you set another font as the primary font, KEPUB will ignore all font face changes in the book and display everything with your selected primary font.

[star-soup]

Yeah, the main font face for the text on my Kobo is set to Publisher Default.

[DNSB]

Could you post the name of the fanfic or attach a copy. It's a lot easier when you can see the entirety of the ebook.

[star-soup]

I'm using this epub to test things out:
Emoji Test - Ima Pseudonym.epub

It's an epub but I have the KoboUtilities plugin in Calibre, which auto-converts it to a kepub when it transfers over to my Kobo.

[Karellen]

Originally Posted by star-soup

I'm using this epub to test things out:
Attachment 211331

It's an epub but I have the KoboUtilities plugin in Calibre, which auto-converts it to a kepub when it transfers over to my Kobo.

I get that you quickly threw that epub togethar as an example, but it is so full of errors that I can't help thinking that is why your emojis are not displaying.

The two most critical are
1 Naked text in the section001.xhtml file,
2 CSS entries that have not been closed off

Not critical, but don't use <br> for line spacing. Use something like <p>&nbsp;</p>

Try fixing all the errors first.
If not sure what or how to fix, let us know. But start off by running CheckBook and EPUBCheck for a list of errors.

[star-soup]

Thank you!! I'm not a coder and didn't spot the errors, so it was very helpful to have them pointed out. I corrected the errors and checked everything again. New result: Noto Color Emojis still display as blank spaces, but with the revised tagging, Noto Emojis display correctly!

The revised file:
Emoji Test - Ima Pseudonym.epub
The code in Calibre:

And how it appears on my Kobo:


Happy to have this working for now. I will go through the main text and set it up the same way so it will display emojis where they occur.

I'm left with the following questions:

• Is there a way to get Kobo to automatically reference an emoji font, so that it isn't necessary to manually tag all emoji instances in the HTML of a book?
• Why will my Kobo Colour display the black and white Noto emojis, but not the color ones?

I'll keep investigating, and if anyone else looks into it I'd be interested to hear what you come up with. Thanks for the help so far!

[star-soup]

Afraid I spoke too soon.

The exact process that worked for the test document is failing in the regular document. I imported the NotoEmoji font file, but am getting the following error when I try and reference the font in the CSS:

NotoEmoji-VariableFont_wght.ttf
This file is included in the book but not referred to by any document in the spine. This means that the file will not be viewable on most e-book readers. You should probably remove this file from the book or add a link to it somewhere.

I used the exact same code from the test file. No idea why this is happening or what to do to correct it.

[Karellen]

I've played around with this for the last half an hour and, like you, I was unable to render the colour emoji's.

I re-downloaded the font file from google fonts, in case your copy was corrupt. No luck, still did not display.

I then changed to a different colour font file.

I tried this one... https://github.com/adobe-fonts/emoji...jiOneColor.otf

And then also used Segoe UI Emoji from Windows.

Both of these worked, but not the noto colour file. No idea why that particular font file won't work.

I've attached my epub if you want to check it out.

[star-soup]

Thanks for sharing the epub! Been using it for further testing.

Currently that Segoe UI Emoji font has provided the best overall solution. I loaded it into the main fonts folder on my Kobo, and then selected it as the main font for the whole book. The text is readable and all the emojis render! They show up black and white despite rendering in color when I open the same book in Calibre, but the important part is that they show up and I don't have to go through the entire text to tag each instance of an emoji showing up.

I'll keep messing with this in the future but I'm very glad to have the Segoe font as a solid and functional option. Thanks for mentioning it!

[Aleron Ives]

Is it possible that Kobo simply doesn't support colour emoji yet? You might try filing a bug report on the Kobo site, and maybe a firmware update will fix it some day.