[DNSB]

Originally Posted by vr8ce

I have a book with multiple embedded fonts. I'm trying to use a different font for a drop cap than the text font. To do so, I created a .dropcap style that specifics the font family, etc.

The calibre editor and book reader both display the drop cap in the correct font.
Neither iBooks on the Mac or iPad do; they display the drop cap at the correct size and placement, but in the body font, not the drop cap font.
Hyper displays the drop caps in the correct font and size, but messes up the columns in landscape mode. (Portrait mode, single-column display is fine.)
FBReader iPad displays the drop caps in the regular font and size, i.e. neither are correct.

I've attached a small test case ebook I created to show what I mean. I removed all of the embedded fonts but the drop cap one, and just have four short chapters. The drop cap font is used on the title page, and it displays correctly there. It's just in the drop caps it doesn't display.

I'm trying to figure out if Calibre has a problem (i.e. shouldn't be displaying the drop caps in the different font), if I have a problem in the file, and if so what I can do to fix it, i.e. display it correctly in iBooks. As can be seen above, I know readers have various levels of support for … everything. But I personally have had good success with iBooks, i.e. if the file is "correct," iBooks will display it correctly. The fact that it shows the wrong font thus makes me think I might have done something incorrectly. Yet, Calibre does show it correctly, so maybe not.

If you don't want to open the book, here's the CSS for the drop cap. (I've tried it with both a div and a span, same results.)

div.dropcaps {
  float: left;
  font-family: OPTIAlpine-BoldItalic;
  font-weight: bold;
  font-style: italic;
  font-size: 90px;
  line-height: 80px;
  padding-top: 1px;
  margin-top: -0.11em;
  margin-right: 0.12em;
  margin-bottom: 0em;
}

And here's a sample of the drop cap code.

<p class="nonindent"><div class="dropcaps"><strong><em>T</em></strong></div>ristique

The strong and em are redundant, since the font style/weight are specified in the class. I've just been trying various things to see if I could get it to work.

A few items.

Using a div inside a p will cause all kinds of errors and makes epubcheck very unhappy.

For an epub aimed for the Apple market, you need to embed a file that gives information about the book including does it include embedded fonts. You might want to check the following page for more information on the file and it's options: com.apple.ibooks.display options.xml.

A few items I would change. I would recommend not specifying fonts that you are not embedding such as the 'font-family: "Charis SIL";' in your body declaration. This can have interesting results (for certain values of interesting). Ditto with using absolute anything, relative is your friend -- specify font sizes in % or em for instance as using pixels will cause the font size to depend on the screen resolution. Specify position relative to the page which again handles different screens better.

Otherwise, you are running into the joy of attempting to make an ebook show the same formatting on multiple platforms and renderers with all their quirky interpretations of the epub specifications -- I won't get into those misbegotten excuses for renderers that use their own internal css instead of your lovingly crafted css. Before getting too serious, I would recommend visiting your nearest warehouse store and stocking up on your preferred headache remedy.

I've attached some screenshots from a Tolino Epos showing the effect of changing the font size on your dropcaps from absolute pixels to em.