One very common way to enhance the quality and formatting of an eBook is to embed fonts in the file. This process is not very difficult to do on a technical level, but it can be frustrating to see the various levels of support for embedded fonts in the different devices.
When embedding fonts in a reflowable eBook file, it is imporatant to remember that the reader has the ability to override your embedded fonts and view the book using the default system fonts built into their device. On some devices, like the Nook, this is the default setting, and the user has to actually turn on your fonts in order to see them. As a result, it is recommended that you not rely completely on your embedded fonts in your reflowable eBook design.
Fixed layout eBooks, on the other hand, usually require embedded fonts. Readers cannot change the display fonts in fixed layout content, and using the same font for the eBook as you used in the print book is preferable because it allows the page layout to be consistent. It also keeps you from running into issues with text display caused by system fonts that have different kerning, x-height, etc.
Font licensing is an important and sometimes difficult subject. It is beyond the scope of this Handbook, but we highly recommend you read BISG's "Field Guide for Fonts for E-books", a thorough resource on both the licensing and practical aspects of embedding fonts.
Also, note that Google Fonts is a great location to find Open License fonts that can be used in your eBooks at no cost.
The most common font formats are TrueType and OpenType. There are some peculiarities that come with these formats, as outlined below:
For these reasons, we normally recommend that eBook creators use OpenType fonts that use the TrueType information tables, either with a .ttf extension or with a .otf extension. In EPUB 3, you can also use WOFF files.
Regardless of the font format, you should ensure that all of the fonts used in your eBook files are Unicode fonts. Some fonts commonly used for foreign languages like Hebrew and Sanskrit in print products will replace the normal Latin characters (A, B, C, etc.) with a different character (א, ב, ג, etc.). This is not appropriate for eBooks, and will prove problematic for readers when the fonts are not supported.
To embed a font in your eBook, you will need to have all of the necessary font files, including any bold, italic, and bold-italic variants if the font is used for that kind of text.
The first step in embedding the fonts is to add @font-face references to the top of your CSS document declaring each font and pointing to its font file. These references have at least two parts: the font-family, which gives the font the name you will be using in your CSS, and the src, which points to the location of the font file in the EPUB. The reference may also include formatting information like font-weight and font-style.
@font-face {
font-family: "CrimsonText";
src: url('fonts/CrimsonText-Roman.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "CrimsonText";
src: url('fonts/CrimsonText-Bold.otf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "CrimsonText";
src: url('fonts/CrimsonText-Italic.otf');
font-weight: normal;
font-style: italic;
}
In this example, note that the font-family for all three of these font files is the same. This allows the reading system to apply the correct file depending on whether it is roman, bold, or italic.
To apply this font to text in your eBook, you can assign the font-family to any element (heading, paragraph, span, etc.), like this:
h1 {
font-family: "CrimsonText", serif;
}
Note that the font is also assigned a generic fallback of serif to let the reading system know what kind of font to apply if the embedded font is not able to be displayed for some reason. Some reading systems will honor this fallback, but some may not. See the Fallbacks page for more information on fallbacks in EPUB files.