[Tex2002ans]

Originally Posted by eggheadbooks1

I don't how to make a subset of the font, that only includes the one character, to embed. Though that would be good to know for future issues. I'll google it.

There are quite a few methods to subset fonts, but Calibre made it super easy.

After you have the fonts in your EPUB + correct CSS, you could either:

• Right click a book in your library and press "Polish Books" -> "Subset all embedded fonts".
• If you have the book open in the Calibre Editor, press "Tools" -> "Subset Embedded Fonts"

Open Source Fonts

There are plenty of free fonts you can choose from to embed:

https://en.wikipedia.org/wiki/Open-s...code_typefaces

One of the fonts that includes the ♫ is Deja Vu Sans, which can be downloaded here:

http://dejavu-fonts.org/wiki/Main_Page

You can easily add the OTF or TTF fonts to the EPUB just like you add any other file. Then you just have to make sure to properly add the references to CSS.

Example Musical Notes EPUB

Here is example code (sample EPUBs attached to this post):

<p><span class="musicnote">♩</span> &amp;#x2669; Unicode Character 'QUARTER NOTE' (U+2669)</p>

<p><span class="musicnote">♪</span> &amp;#x266a; Unicode Character 'EIGHTH NOTE' (U+266A)</p>

<p><span class="musicnote">♫</span> &amp;#x266b; Unicode Character 'BEAMED EIGHTH NOTES' (U+266B)</p>

<p><span class="musicnote">♬</span> &amp;#x266c; Unicode Character 'BEAMED SIXTEENTH NOTES' (U+266C)</p>

<p class="NoIndent">When you see this symbol <span class="musicnote">♫</span> in the chapter, listen to the song that accompanies the story.</p>

Here is the CSS you need to tell the musical notes to use "Deja Vu Sans" as the font:

@font-face {
font-family: 'DejaVuSans';
font-style: normal;
font-weight: normal;
src: url(../Fonts/DejaVuSans.ttf);
}

.musicnote {
font-family: 'DejaVuSans', serif;
}

I attached 3 EPUBs:

• [NoFont]
  
  • This is just the HTML, no CSS.
• [YesFont]
  
  • This includes the entire "Deja Vu Sans" font (739.33 KB).
    
  • Total EPUB Size: 373.0 KB.
• [YesSubsetFont]
  
  • I subset this using Calibre, and the font became 175.01 KB.
    
  • Total EPUB Size: 62.8 KB.

ADE Before/After:



Kindle Before/After:

Originally Posted by eggheadbooks1

I did not embed the Unicode font in the ePub; I was hoping it would work automatically as it does in the Kindle (as per Doitsu's post). It didn't. So I am using a GIF for the ePub. Works just as well now that I tweaked the code.

In the topic I linked to there was a bit of discussion of many of the Pros/Cons of the different methods (Font/Bitmap/Vector). I will just mention a few of the downfalls of the Bitmap method off the top of my head:

• Not searchable
• Not copy/pastable
• Doesn't work well with Text-to-Speech (well... you could add an alt to your <img>)
• Doesn't match user preferences
  
  • The user might want to read in a different color font ♫♫♫♫♫♫♫.
    
  • Might not work well in Night Mode (could have a huge white background behind the image).
    
• Doesn't upscale/downscale well (unless SVG)

As you can probably see, many of the cons are sort of "hidden" from plain view. The images LOOK/WORK fine on the surface, but underneath, there are issues that creep up.