Tuesday, April 12, 2011

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:

Embed Fonts in EPUB

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

EmbedFontsNook

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

22 comments:

  1. The font file still needs to be added to the manifest in the opf file. But yeah, the less hacks, the better.

    Licensing is the still the big issue to me. Fonts that have special eBook distribution licenses don't make them clear, and tracking down fonts with open licenses is time quite consuming.

    ReplyDelete
  2. @chris: adding a font file to the manifest is not a hack, it's required and standard practice.

    And yes, licensing is still a drag. That's why I've been using free and open-source fonts in my examples.

    ReplyDelete
  3. I didn't mean adding to the manifest was a hack. I was agreeing that one less hack was a good thing, AND saying that adding to the manifest was still necessary.

    Ah well. I should learn to left-align my phrasing so I don't have justify it later :-).

    ReplyDelete
  4. LOL, that's a good one. (And, sorry, I didn't mean to jump on you.)

    ReplyDelete
  5. I was very excited at first, until I broke it. This would be great IF it were full-proof but I've found what I think are some disappointing problems.

    This XML file enables a new "Original" option in the font menu of iBooks, but it does NOT force Original to be chosen by default. If the user sets another font (say Times New Roman) prior to opening your book, the user's font "may" be used instead of the custom font. I say "may" because it's glitchy. On your provided sample book, if Times New Roman is chosen before I open the book, your custom font does NOT work. However if Verdana was the user's font, then your custom font does work.

    Assuming your custom font is working, try switching fonts. It keeps the custom font until you switch to Times New Roman, and then all text changes to Times New Roman, loosing your custom font. That's just plain glitchy! Later font changes fail to use the custom font either, until you switch to Original and than back again. There seems to be something special about Time New Roman triggering the custom font to fail.

    In short, if users have Times New Roman as their default font, books using this XML trick will NOT display the custom font.

    This XML trick is certainly cleaner and no longer a hack, but it's glitchy and not everyone will see your font. It seems the font hacks still win if you want to ensure "everyone" will always see the font.

    Regarding the font hacks, yesterday I discovered that if you put a section tag inside the p tag (instead of the abbr or cite tag hacks I've been reading about) you can specify the font on the section tag and iBooks will accept it. I know it's not semantically perfect but it's better than abbr or cite and the section tag will never have any default styling like the cite tag. It's still a hack, but not as hackish :)

    Thoughts?
    Dan

    ReplyDelete
  6. When I experimented with eBook Architects' font sample of this type (http://ebookarchitects.com/files/Fonts.epub) (which includes right-left and Asian fonts, too), the problem seems to go even beyond Times New Roman. Only in Original will the proper fonts be shown, and even the very first time I downloaded and opened the ebook, the font still defaulted to Palatino, not Original.

    So until we have some means of assuring that Original is the chosen item in the font menu, we're not there yet.

    Low-tech workaround: Suggest it to the reader on the launch page for the ebook.

    Better: if we could supply a Javascript or something that would change the font menu item to Original (though I don't know how to access app UI in JS.)

    Best: Any ebook would at least start in Original on first launch.

    Or: Some unknown-to-me Webkit CSS that would override user font face changes (while still allowing size changes)

    ReplyDelete
  7. this is a genius tweak, that line in the display-options works a treat. now, I wonder if we can side load fonts into iBooks and reference them without embedding?

    ReplyDelete
  8. iBooks 1.2.2 update didn't fix the bug that the original font does not always work. The Times New Roman issue I mentioned in my previous comment it still there. I was disappointed because it said the update addressed fonts issues, but not this one yet.

    ReplyDelete
  9. Liz, how come in your example file the font is not included in the manifest and still works? Is that step necessary?

    ReplyDelete
  10. Talking about font licencing, some fonts may be redistributed but under the condition that you attach the licence terms and conditons (such as the GNU General Public Licence). I wonder how best this should be done. I've found that it is not easy to simply add a txt file in the EPUB (it requires some sort of "fallback" code to be added) - instead, I included the licence in a separate xhtml file and didn't list it in the spine. It works, but I don't feel it's a "clean solution".

    ReplyDelete
  11. Does this all go through epubcheck? The embedded fonts seem to be the last hurdle in getting my file through to the iBookstore. Btw, I have your book. It is very helpful.

    ReplyDelete
  12. @Monica. Yup, it all validates.

    ReplyDelete
  13. I've been going back and forth with testing and I'm not coming up with the results that I think I should get.

    I want to use Helvetica Neue as my main paragraph text. This is one of the 33 fonts available.

    From this article, it seems that I don't need to do anything special to make it work. Therefore, my CSS template file just has to say something like :

    p.body {font-family: "Helvetica Neue"} and then in my html file, I just use the p class="body" tag and all should be fine. Is that not the case? Do I need to do something else? My understanding is that I don't need the @fontface statement in my css template file.

    Also, if I want to bold and italicize something within that p class="body" tag, do I need to do something more than using the span.bold {font-weight; bold;} code in my css file (and subsequent span code in the html file? When I do that, anything in the bold span tag renders out in a completely diff font.

    Thanks in advance. I feel I'm so close.

    Paul

    ReplyDelete
  14. Hi Liz,

    Just wondering if you can send me down the correct path on my question above. It's the only thing that stumping me on my book.

    Do I still have to use the code/samp/abbr tags to make this work? There's an inherent problem with using code and samp with respect to using span classes within them. I have yet to try abbr but it seems your post alludes to the fact that I don't need to use any of those workarounds.

    Thanks,

    Paul

    ReplyDelete
  15. I created an EPUB with InDesign CS5.5 and tweaked the OPF for the com.apple.ibooks.display-options.xml
    It views perfectly on my iPadf but seems to crash ADE.ç

    Ken.

    ReplyDelete
  16. I have always used this page as my primary reminder on how to embed fonts, but have found with the Nook Touch and the Nextbook I have to also declare the fonts on the opening of every page I want to use it on as well as the CSS.

    But in the past two days I've hit another problem. It seems that no matter what I do in this particular epub I'm working on the font won't work. It's Hebrew. I've tried changing the words to alternate key codes, double checked my CSS until my eyes are bleeding and am just plain frustrated. This method has always proven buggy at best for me, but this time it can't be made to work.

    ReplyDelete
  17. It is indeed impressive. I opened the sample file in Android devices also where LumiRead was the only app which seemed to support the font embedding. However, I was primarily interested in embedding font for a language which is based on Arabic script. I embedded the font and viewed it in iBook. Somehow, and I found it rather strange, iBook was using the embedded font for the Roman script part while it used stock/system font for the Arabic script part instead of the embedded font! Any idea what might be the reason? Thanks.

    ReplyDelete
  18. I stumbled upon this post almost a year after it was posted and it instantly got me interested. I have been struggling for quite some time to create Gujarati (Language from western India) eBooks for iPad and Kindle. Though I have created number of books which are able to show fonts with some glitches, I got a few interesting things to wok on. Thanks Liz. I just purchased and downloaded your bunch of "Ebooks on Ebooks" :) looking forward to interesting relationship...

    ReplyDelete
  19. I want to read a book in Marathi. I have a original book file in PDF but the font used in that PDF is not identified. I tried converting the PDF to ePub with the library management software Calibre.

    Even this tutorial, I cant got any help.

    ReplyDelete
  20. I recently purchased a book on iBooks for a summer assignment. I have to read it and do a analysis on every 20 pages. My problem is that the sizing and font are wrong and do not correctly match up with a "regular book". I was trying to convert it to a PDF file, but cannot find out how. Any suggestions?

    ReplyDelete
    Replies
    1. Not easy. Can you match with 'regular book' and then search for 20-page markers?

      Delete
  21. Dear Liz,

    I've followed your directions to the letter but am having no luck.

    I'm working for a small university press and we are producing a book that studies the nitty-gritty of Hebrew and Greek surrounding a theological term. We've had all kinds of headaches with three things:

    1.) Greek font
    2.) Hebrew font
    3.) transliteration fonts (apparently iPad hates diacritical marks of any kind)

    Here is what I have in my CSS:


    @font-face {font-family: bwhebb; src: url("fonts/bwhebb_0.ttf");}
    @font-face {font-family: GentiumPlus-I; src: url("fonts/GentiumPlus-I.ttf");}
    @font-face {font-family: GalatianSIL; src: url("fonts/GalSILR201.ttf");}
    @font-face {font-family: EzraSIL; src: url("fonts/SILEOT.ttf");}

    .Hebrew {font-family: "EzraSIL"; font-size: 1.15em;}
    .dcrit {font-family: "bwhebb"; font-size: 1.25em;}
    .dcrit-i {font-family: "GentiumPlus-I"; font-style: italic;}
    .dcrit-greek {font-family: "GalatianSIL"; font-style: normal; font-size: 1em;}

    And you'll have to take my word for it that I have "" (this blog won't let me post spans without interrupting the word) in my HTML because that information is copyrighted etc etc.

    In my META-INF folder, I have a com.apple.ibooks.display-options.xml file, and the only thing in the file is:

    true (blog also won't allow option tags)


    I've been driving myself all sorts of crazy with this project. For a while all that was happening was that anywhere the BibleWorks font (bwhebb) was called in the text, the font size attributes were applied, but the font was still Roman letters (bwhebb uses Roman letter inputs but simply applies Hebrew characters to individual Roman letters, so "b" looks like a Hebrew "bet", etc.). So instead of getting Hebrew characters, we just had spans of larger font that looked like total gibberish (e.g. XlvT! ',tvlm, etc. etc.).

    So then we tried replacing this font with the EzraSIL font. We originally went with BibleWorks because we were told the reason we were having problems is that DreamWeaver and other Adobe Suite programs couldn't handle right-to-left fonts. We now know this is NOT true and was bad info.

    When we plugged in EzraSIL, added the @font-face declaration, and called the font in the HTML, the iPad spit out some Hebrew characters, but they are not in the EzraSIL font, interestingly. Rather, they are in some sort of new-fangled simplified font, and many of the vowel-pointings are absent. Some characters display as a place-holder box, too.

    So then I went back and realized that in all of your examples, you have " " marks around font names. When I added these and re-created the ePub file, the iPad flashed actual EzraSIL font for just a second or two but then reverted to the new font with no diacritics and with wing-dings and boxes and such.

    What do you think might be going on there?

    ReplyDelete

More of my books