How to embed fonts in ePub files

by Liza Daly

(You may be interested in the earlier article, When to embed fonts in ePub files.)

Font selection

Font formats and licensing are complicated. The ePub specification recommends that book designers and reading system implementers use OpenType fonts when possible (although TrueType fonts remain more common). If your font ends in a .otf extension, it’s an OpenType font. I’ll use OpenType in my discussion here.

Licensing

Font licenses may allow you to use the font in printed collateral or even digital documents, but may not allow you to embed that font for distribution elsewhere. It’s unclear whether specific foundries consider bundling a font with an ebook to be violating their license. Theoretically, nothing stops the end-user from unzipping the .epub file and taking out the font, so bundling it with an epub could be considered a form of distribution.

One method to allow font inclusion without violating any license is to employ font obfuscation. Adobe has released some open-source code in epub-tools to enable this, and provided detailed documentation for software developers who want to implement the algorithm. I’m not aware of any readers besides ADE that can read fonts obfuscated in this manner, though.

Fonts with open licenses

My preferred solution for bundling fonts is to dodge the entire licensing issue altogether by using an open license. The Bitstream Vera fonts have a generous license and good Unicode support, but don’t include all possible serif/italic/bold combinations. A later variant called DejaVu improves on this by including more faces and even better Unicode support.

My favorite fonts in terms of good Unicode support combined with an open license are the Liberation series. These are workhorse fonts designed to resemble the basic Microsoft set of Arial, Times and Courier. Nothing fancy, but they’re screen-readable and contain a wide range of characters.

How to embed a font

If you’re not afraid of specs, I recommend reviewing the CSS2 @font-face rule. But here’s the step-by-step:

0. Convert the font to OpenType

This is step 0 because it’s not strictly required, and you may already be starting from an OpenType font. I usually convert TTF fonts to OTF with FontForge. FontForge is not the friendliest software but it will do the job. Commercial font software will be much easier to use but tends to be expensive. Or you can just skip this step.

1. Add the font to the OPF package

Every file in your epub must be declared in the OPF manifest. This includes fonts. Put the font in the same place as your OPF file (usually a folder called OEBPS) and add it to the manifest. For example:

<item id="epub.embedded.font" href="MyFont.otf" media-type="font/opentype"/>

1.a Repeat for all combinations of faces

You will probably want to add additional packages to support all combinations of bold, italics, serif and sans-serif (as users may be able to switch serif settings in their reader).

2. Create the CSS @font-face rules

This is standard CSS from here on out; nothing ePub specific:

Declare the font itself

This tells CSS that you will be using a particular font in the document. It doesn’t say where it will be used, so just including this directive will have no effect:

@font-face {
  font-family : MyFont;
  font-weight : normal;
  font-style: normal;
  src : url(MyFont.otf);
}

Now we need to tell the CSS where this font should be used. To set it as the default font for the entire document, apply it to the <body> element:

body {
  font-family: "MyFont", serif;
}

This should be the last rule in your CSS.

Note that the generic “serif” declaration follows our declared font. I don’t recommend declaring any other fallback fonts besides just serif or sans-serif.

If you included italic or bold variants separately, add them as:

@font-face {
  font-family : MyFontBold;
  font-weight : bold;
  font-style: normal;
  src : url(MyFontBold.otf);
}

@font-face {
  font-family : MyFontItalic;
  font-weight : normal;
  font-style: italic;
  src : url(MyFontItalic.otf);
}

strong, b {
  font-family: "MyFontBold", serif;
}

em, i {
  font-family: "MyFontItalic", serif;
}

You may need to tweak the font assignments for particular elements. For example, <blockquote> is typically rendered in italics; you’ll need to assign that to the italic variant as well.

3. Validate your ePub

This has nothing to do with fonts, but you should be validating any ePub you generate.

4. Test it out

The earlier font embedding article contains a list of readers which support embedded fonts. If possible I recommend testing both on Adobe Digital Editions and a compatible eink reader.

(Many thanks to Keith Fahlgren at O’Reilly Media for teaching me about real-world embedded font support.)

Edited November 10, 2009 to include a pointer to DejaVu.)