Can I make custom fonts show up in iBooks?

Question

Is it possible to include custom fonts in an ebook and have them show up in iBooks, or can you only use the various default fonts listed on the device?

Answer 1

It is certainly possible to embed custom fonts and have them be used in iBooks, as well as on other EPUB reading systems. The process is known as embedding. Embedded fonts are simply included in the .zip archive that comprises the EPUB file, and then referenced properly in all the relevant content files. Places you will need to reference them include:

CSS file

This is just like using fonts on the web: the first thing you need to do is define @font-face:

@font-face {
  font-family: roboto;
  src: url('fonts/Roboto/Roboto-Regular.ttf')
}

and then use that declaration in for whichever styles you'd like to use that font:

p.intro {
  font-family: roboto;
  font-weight: normal;
  font-style: normal;
}

content.opf file

Just like all the other files in your EPUB, you'll need to include any font files you're embedding in the <manifest> of your .opf file:

<item id="Roboto-Regular_ttf" href="fonts/Roboto-Regular.ttf" media-type="application/x-font-truetype" />

The above steps are sufficient for most reading systems, but iBooks has one more hoop to jump through:

com.apple.ibooks.display-options.xml

This is a file that goes in the META-INF folder of the EPUB, rather than the OEBPS folder, and as the name suggests it's iBooks-specific. Neither this file nor the container.xml file need to be declared in the <manifest>, so don't worry about that. Here is the file in its entirety:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<display_options>
<platform name="*">
<option name="specified-fonts">true</option>
</platform>
</display_options>

A more in-depth writeup can be found on Liz Castro's excellent blog. As noted elsewhere, be aware that there are some potential hurdles, both legal and practical, to embedding fonts.

Answer 2

To extend on Tom's answer I have to disagree with how the media type is written for Truetype and I would also like to show how its written for Opentype.

In the .opf file <manifest>:

Truetype fonts

<item id="Roboto_Regular" href="fonts/Roboto_Regular.ttf" media-type="application/x-font-ttf" />

media type for Truetype is: "application/x-font-ttf".

Opentype fonts

<item id="Roboto_Regular" href="fonts/Roboto_Regular.otf" media-type="application/vnd.ms-opentype" />

media type for Opentype should be: "application/vnd.ms-opentype" but I have seen "application/x-font-opentype" used and pass validation.

Prior versions of Epubcheck I want to say used to check for this but I haven't tested it within EpubCheck-3.0.1

Be careful on how you code your paths when declaring the src:url in the .css file for the font. I have seen some people use absolute paths when they should have used a relative path and it throw a validation error of an unused font.

Note you cannot just include a master .css file that calls for a ton of fonts. If you code for a font to be used in the .css file and include it in the package it must be used and declared in the .opf file or you will throw a:

<Error>
<Message>'fonts/foobar.ttf': referenced resource missing in the package.</Message>
<Line>2</Line>
<Column>71</Column>
<Resource>foobar.css</Resource>
<Class>com.adobe.common.ReportElement</Class>
</Error>

If you are not going to use the font you should remove it from the package and comment it out in the .css file