Posted by & filed under book design, epub, geek.

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

Tags:

14 Responses to “How to embed fonts in ePub files”

  1. Padman

    Thanks for this guide – it explains me a lot. The only thing I struggle with is how to compile the files again to create single ePUB file using embedded fonts. Any hint?

  2. Billy

    I believe the intention of the “@font-face” rule is to map from a combination of CSS properties to a system file name. The above example can/should thus be simplified to:

    @font-face {
    /* this combination of CSS properties… */
    font-family : MyFont; /* same family name! */
    font-weight : bold;
    font-style: normal;
    /* … is mapped to this file */
    src : url(MyFontBold.otf);
    }

    @font-face {
    font-family : MyFont; /* same family name! */
    font-weight : normal;
    font-style: italic;
    src : url(MyFontItalic.otf);
    }

    This way, you have to do nothing special in your CSS rules:

    strong, b {
    /* nothing here */
    }

    em, i {
    /* nothing here */
    }

    You can even map to font files you couldn’t use any other way, because they are not mapped by default:

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

    Or you can use a slightly heavier “book” font weight as a normal weight for readability:

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

    And, of course, you can use SVG fonts this way (any browser but FF):

    @font-face {
    font-family : MyFont;
    font-weight : normal;
    font-style: normal;
    src : url(MyFile.svg#MyFont) format(“svg”);
    }

  3. Tony

    Thanks for the help.
    I successfully embedded the font. However, i still can not see certain characters when using Adobe Digital Editions even though they are in the embedded font. Is this a known issue with Adobe?

  4. Liza Daly

    Thanks Arthur. I’m always looking for other fonts to recommend, and I especially appreciate the small-caps tip since that’s a common request.

  5. Yaron Goldstein

    1. I arrived to this excellent post from your very helpful and enlightening presentation about Designing ebooks for ePub reading engines. I wish I’d have seen it before as we had to discover all this from various sites and doing “some” trial and error. We create Hebrew eBooks – HeBooks as we call them, so embedding is essential for some readers, especially RMSDK based ones. Otherwise, ADE and Sony Reader just show question marks. Alas, embedding is not enough, ADE, Sony do not support RTL. So the Hebrew text is displayed the other way around. Adobe couldn’t care less. I even tried through insiders. And tried to argue that they cannot claim they fully support ePub and that Stanza, FBReader, EPUBReader read Hebrew beautifully. Nada. So please be aware that font embedding is not always enough to work-around the RMSDK missing foreign language support.

    2. Why do you recommend to include only one fallback. We use the embedded font itself as the last fallback as in:
    .regular {font-size: 100%;
    font-family: ‘Times New Roman’, Times, serif, ‘sans serif’, ‘DejaVu Sans’;
    }
    The idea is that the embedded font would be used (as it is used in ADE) only if all other options do not include Hebrew characters.
    Do you see anything wrong with that?
    Thank you.
    Read about us if you will at http://www.teleread.org/2010/03/12/the-first-hebrew-epub-online-store-hebrew-e-books-at-mendele-he-books/

  6. Liza Daly

    Yaron,

    I’m definitely aware of the problem with RTL text in RMSDK but I’m glad that you’re applying pressure!

    Mostly I recommend just one fallback because it simplifies things. With the huge range of reading devices out there I don’t think it’s worth publishers’ time trying out different fonts without knowing how they’ll display.

    Your fallback rules are surprising, but I’m glad that ADE recognizes that the other font names don’t accurately represent the content (I’d be concerned that it would just stop at ‘serif’). That seems like a sensible approach if you really would prefer it not use DejaVu.

  7. Abhinav Singh

    I have converted a file from word doc to epub using Indesign CS4. It shows some error like :

    1. ERROR: EPUB_7MAY.epub/META-INF/encryption.xml(2): attribute “compression” from namespace “http://ns.adobe.com/digitaleditions/enc” not allowed at this point; ignored
    2. ERROR: EPUB_7MAY.epub/META-INF/encryption.xml(8): attribute “compression” from namespace “http://ns.adobe.com/digitaleditions/enc” not allowed at this point; ignored
    3. ERROR: EPUB_7MAY.epub/META-INF/encryption.xml(14): attribute “compression” from namespace “http://ns.adobe.com/digitaleditions/enc” not allowed at this point; ignored
    4. ERROR: EPUB_7MAY.epub/OEBPS/content.opf(10): date value ” is not valid, YYYY[-MM[-DD]] expected
    5. ERROR: EPUB_7MAY.epub/OEBPS/toc.ncx(13): unfinished element
    6. ERROR: EPUB_7MAY.epub/OEBPS/toc.ncx(3): assertion failed: first playOrder value is not 1
    7. Check finished with warnings or errors!

    please tell me what should I do?

  8. Aross

    I actualy have the exact same problem as Abhinav, any help would really be appreciated!

  9. Liza Daly

    That is InDesign’s form of font obfuscation, which does not produce valid EPUB files. Uncheck “embed fonts” when exporting from InDesign.

  10. YKastell

    Newbie remark :
    In the @font-face statement,
    it seems that the value for the src property must be relative to the root of the ePUB file

    (e.g. : if your otf file is in a Fonts directory
    it must be
    src : url(/Fonts/MyFont.otf);

Trackbacks/Pingbacks

  1.  Choosing InDesign ePub output options : Threepress Consulting blog