Embedding Fonts in EPUB- iPad, iPhone AND nook

I don't know how I missed this. I did see that Apple had published a new iBookstore Assets guide in late March, and I looked through the “changes in version 4.6” section pretty closely. But today I noticed something new: iBooks now supports embedded fonts even in regular, reflowable, non-fixed layout EPUBs.

That's not all. I noticed while I was testing this feature that Apple no longer restricts embedded fonts to non-special tags, as I describe on page 140 of my EPUB book. This is a really big deal, and means you can forget the ugly hacks previously required to get them to appear. If you want to use any of the 33 font families that come pre-installed in iOS (they are listed with samples in my book), you can simply call them in the CSS rule (skipping @font-face and the special file explained below).

And, and, and that's still not all. The really cool part is that the same code works on the nook too. Ooh, cross-platform font embedding in EPUB. I like it!

Here's how to embed fonts into an EPUB book:

First, add the font to your book files in the normal way, by adding an @font-face statement at the beginning of your CSS, something like this:

@font-face {
font-family: Prophecy Script;
font-style: normal;
font-weight: normal;
src:url("Fonts/Prophecy_Script.ttf");
}

That makes the font available. To apply it to your text, you have to add it to one of your styles, also in the CSS:

p.letter {
    font-family: "Prophecy Script";
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-hyphens:none;
}

And then make sure your HTML actually uses one of those styles:
<p class="letter">Warren Cty Ky March 11th</p>

The last step is to add a com.apple.ibooks.display-options.xml file in your META-INF folder. (If you don't know where that is, my EPUB book will be helpful.) The com.apple.ibooks.display-options.xml file is required for Fixed Layout EPUBs, but it looks like Apple is expanding its use.

The file should have a line like this one:

<option name="specified-fonts">true</option>

Put it all together, and you can get something like this:



Here's what it looks like on the nook (which I wish allowed screenshots!)



The font that I used is pretty similar to my great-great-grandmother's handwriting, and was designed by Michael Tension from Tension Type, and generously made available on Dafont.com. Remember to check font licenses before embedding them in your EPUB files.

Finally, if you're curious, you can see the original letter too.

And perhaps more importantly, you can download the sample file (I don't guarantee that it's free of that pesky iTunesMetadata.plist file.)