Custom fonts in iBooks

By now, I am sure you’ve heard that every device in the market has its own little quirks. Whether it’s not scaling images correctly, ignoring transparency, overlooking style settings in certain tags or some other weird behavior, the process of formatting ebooks across platforms is anything than straight-forward.

Today I want to direct your attention to one issue in particular, the way iBooks is handling font switches. Ordinarily, and on all other platforms, changing the font in a block of text is one of the most rudimentary and trivial things to do. You would set up styles and then use a, <p>, <span> or <label> tag to switch the style and consequently the font type with it, just as outlined here with these style settings…

span.sans-serif { font-family: sans-serif; }
span.serif { font-family: serif; }
span.monospace { font-family: monospace; }

…and the following HTML paragraph.

<p>This is an example for a <span class=”sans-serif”>sans-serif font</span>, while this is a switch to a <span class=”monospace”>monospace font</span> and this here a quick look at a <span class=”serif”>serif font</span>.</p>

Unfortunately, on various occasions, Apple has decided, for unfathomable reasons, to break with convention and create implementations that are more tedious than they really need to be. The approach I just illustrated is not working in iBooks—or rather I should say, it is not always working. Especially when you use embedded fonts that are included using the @font-face rule, you will find that they simply do not show up.

There are two small additional steps that are necessary to get iBooks to properly display your fonts, though small they may be, they are also incredibly cumbersome.

The process involves getting inside the actual ePub file and adding information. Fortunately, Calibre lets us do that fairly elegantly, but it is nonetheless a tedium because you will have to do this every time you rebuild your book.

When you right-click your book in Calibre a context menu appears and you will find an entry called “Edit the book” at the bottom of the list. Naturally you will first have to build an ePub version of your book for this to show up, but when you select it, a new window will open showing you the structure of the eBook on the left hand side and the file contents at the center. You now have access to the internal structure of the ePub file, which is a packaged-up assortment of individual files, actually.

In the Files Browser window on the left side of the screen scroll down to the Miscellaneous area where you will find a file called content.opf. Double-click that file and its contents will be displayed in the large window at the center of the screen.

Now enter the following code in that file

<meta property="ibooks:specified-fonts">true</meta>

Best place it right at the end of the <metadata> section just before the closing </metadata> tag.

Now comes the trickier part. We actually need to include a completely new file. First open up a text editor and create a new text file. There, enter the following lines


<display_options>
   <platform name="*"> <!-- allowed values for platform "iphone", "ipad", or "*" for all -->
     <option name="specified-fonts">true</option> <!-- must be set to "true" for embedded fonts -->
   </platform>
</display_options>

and then save the file as com.apple.ibooks.display-options.xml. Alternatively, simply right-click this link and save the file to your computer.

addbtnWith the “Edit Book” details page still open in Calibre, click on the “New File” icon in the upper left corner of the window.

Now enter meta-inf/com.apple.ibooks.display-options.xml in the dialog box and then click on the “Import resource file” button. Locate and chose the com.apple.ibooks.display-options.xml file just we created and hit the “Open” button, followed by “Okay.” You will now see that the file com.apple.ibooks.display-options.xml is appearing in the “Miscellaneous” section of the book structure.

savebtnNow save your changes and close the “Edit Book” window. Back on the Calibre main screen, hit the “Save to Disc” button to save the modified ePub version to your computer.

That is it. You now have properly embedded the necessary information in your ePub file that makes it possible for iOS devices to correctly display different fonts.

If you do not use Calibre, you can also make these changes by hand. All you have to do is unzip your ePub file using whatever software you would ordinarily use to unzip a regular ZIP file.

Once completed, you will find a subfolder on your computer, containing the individual files the eBook consists of. Locate the file content.opf and make the same changes I described above.

Then navigate into the meta-inf subfolder and place the file com.apple.ibooks.display-options.xml in there. The process to create or obtain the file is the same one I described earlier.

The changes are now complete, but will have to zip all these files back up into an ePub file.

This is best done using a command line version of your zip tool. Once you have opened a command line or terminal on your computer, navigate to the directory where your actual eBook files are that you need to zip up. Then enter the following command.

zip -X0 ebook.zip mimetype

This creates the base package for the eBook. We now zip all the content files into it using the following command

zip -rDX9 ebook.zip * -x "*.DS_Store" -x mimetype

Once this is complete, you will see a new file called ebook.zip in the folder. All we need to do is rename it now. If you are working on a Windows computer, simply enter the following command.

ren ebook.zip title_of_your_book.epub

Alternatively, if you are working on a Mac, the following command will do the trick

mv ebook.zip title_of_your_book.epub

That’s all there is to it. Keep in mind, however, that these steps will have to be repeated every time you rebuild the book!


ZenCoverIf you want to keep up with my eBook formatting work, don’t forget to subscribe to my Newsletter. That way I can keep you updated about the latest developments, updates to my books, code snippets, techniques and formatting tips.

Also, don’t forget to check out my book Zen of eBook Formatting that is filled with tips, techniques and valuable information about the eBook formatting process.

Facebooktwitterredditpinterestlinkedinmail

15 Replies to “Custom fonts in iBooks”

  1. Bob

    Guido

    Please help.

    I’ve made it all the way through loading my html script into Calibre, and the last step is to save it to my disk. But when I do this, I get the following error message:

    “Error: Not allowed: You are trying to save files into the caliber library. This can cause corruption of your library. Save to disk is meant to export files from your Calibre library elsewhere.”

    The two buttons shown are:
    “Okay” button, or “Copy to clipboard”

    I have updated the software, and deleted and reloaded the html file. Same thing. Went into preferences under “save to disk” and didn’t see anything out of wack. I’m running Mac 10.9.5.

    Any ideas?

    • Guido

      I am not entirely sure what may be happening there. I think you might press the wrong button or get the order wrong.
      First build the book as an ePub, then select “Edit book” and make the changes in the “Edit book” editor. Then click on the hard drive symbol in the upper left hand corner or select “File->Save” from the menu to save the changes. Close the “Edit book”editor window and go back to Calibre. Now press the “Save to disc” button in Calibre to save the edited version of your eBook out to your hard drive where you can access it.

  2. Erik

    Hi Guido-

    Thanks for putting this together. I’m trying tom hanker an ePub file (the first f many probably) to the opendyslexic font for some of my students. I used the edit file tool in calibre to change all fonts to opendyslexic for this file (the only way I could see to do it). And then used these instructions to change and add the required files. When I add the new ePub to iBooks on an iPad, however, it both doesn’t show the new font or allow me to choose it under iBooks font menu. Any ideas?

    Thanks for your help.

    Peace-

    Erik

    • Guido

      If you do it the way you’re doing it, you will also have to make sure to include he actual font file in the ePUB. Simply drag and drop the font’s TTF or OTF file in the same directory where the main HTML files are.

  3. Erik

    Thanks for the reply, Guido.

    I tried what you said and included the TTF file in the package (drag and drop didn’t work so I had to add a file using the same method I used for the com.apple… file in your original directions).

    Unfortunately, it still isn’t showing up either as native formatting or as an option.

    I’ve no idea where I wen’t wrong and truly do appreciate the help (as will my students). Any ideas about what else could be getting in the way?

    Or is there a more direct way to change the font that I’m not thinking of? My html skills are minimal at best and I’m just kind of hacking away blindly at this.

    Thanks again.

    Peace-

    Erik

  4. Erik

    I have never asked this of anyone I randomly found via a google search, but could you by any chance do so? I’d happily send the epub and would only ask for advice rather than having the work done (I will need to do the same for other texts later, after all).

    Thanks for considering.

    Peace-

    Erik

  5. Marc Jeffrey Driftmeyer

    You made one mistake.

    Your xml file is missing a closing after true.

    Just tested on iBooks for OS X 10.11.6 and finally the book renders as I had hoped.

    Thanks for this tidbit of info. Now all my series will turn out as I want it to do.

  6. Shady zax

    Thank you so much for this. It worked like a charm.. i was hoping ud be able to guide us similarly for the kindle app (for iphone)?? That wud be amazing!

  7. Audrey

    Hello,

    This works great, except it seems to make my file fail the idpf EPUB Validation — any idea why, or how to incorporate this fix and still pass the validation? The errors I receive are all in the “content.opf” —

    Error while parsing file ‘attribute “property” not allowed here; expected attribute “content”, “id”, “name”, “scheme” or “xml:lang”‘.

    Error while parsing file ‘element “meta” missing required attributes “content” and “name”‘.

    Error while parsing file ‘text not allowed here; expected the element end-tag’.

    Thanks so much!

    • Guido

      These error messages indicate that something is wrong with your tagging. Unfortunately, it is impossible to determine what exactly is wrong with it without actually taking a look at the source HTML file. Feel free to email it to me, however, and I’ll take a quick look for you.

Leave a Reply

Your email address will not be published.