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.)
Code:
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.
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.