Add fonts to the package, manifest and CSS

Some epub experts recommend not including fonts in an epub package. They are inconsistently applied by ereading systems, and they make the epub file a lot bigger (a font is often around 250K per variant, e.g. regular, bold or italic). But many publishers and designers want to offer a better design preference than the default fonts in most ereading systems, even if many systems or users override those fonts in the final display. It’s up to you, but if you do wants to include fonts, here’s a way to do this.

To embed fonts, we have to do three things:

• include the font files in the OEBPS folder
• list the fonts in the epub’s manifest (in the content.opf file)
• include @fontface rules in the epub’s CSS file.

Ensure the font files are in OEBPS

If you had InDesign embed fonts on export to epub, InDesign would have included encrypted (“mangled”) font files in the OEBPS folder. You have a choice to make:

1. leave the mangled font files and encryption in place, but risk the epub file not validating (not recommended but necessary if you’ve used proprietary fonts), OR
2. replace InDesign’s embedded fonts with original font files, and remove the encryption (recommended).

If you’re going with (1), ignore the rest of this section on fonts.

Otherwise:

• InDesign probably put an “encryption” file in the META-INF folder. Delete it.
• If the fonts were embedded when the epub was created (e.g. at export in InDesign), find the files of the embedded fonts. They should be in the OEBPS folder, sometimes in their own “fonts” folder.
• If there are no font files there yet, copy the font files your epub needs (all variants, such as regular, bold, italic and bold-italic) to the OEBPS folder. We recommend putting them in a “fonts” folder in OEBPS, just to keep things neatly organised.
• Make a note of each file name (e.g. copy the file names into a Notepad text document for now). If they’re in a folder inside OEBPS (e.g. “Fonts”), note the file names including the folder name, taking care to copy any capitalisation (e.g. “fonts/LinLibertine_Re-4.1.8.ttf” is not the same as “Fonts/LinLibertine_Re-4.1.8.ttf”).

List fonts in the manifest

Epub reading systems need to know exactly what is in the epub package. They do this by reading the manifest, a list of everything in the epub package. This list is kept in a simple XML format in the content.opf file. If you add font files to the epub, you need to add them to the manifest.

1. Open the content.opf file (in a text/code editor like TextPad or gedit). Find the tag. After the list of items in the manifest, the list is closed with a tag. The order of the items in the manifest doesn’t matter. So anywhere between the and tags, insert the following line for each font file in your epub:

<item id="fontname" href="fontfilename.otf" media-type="application/opentype"/>

where:

• fontname is the name of the font
• fontfilename.otf is the full file name including the path relative to the content.opf file (i.e. if fonts are in their own “fonts” folder, the path and name would befonts/fontfilename.otf – remember these paths are case sensitive)
• application/opentype means this is an opentype (.otf) font. Change to application/x-font-ttf for truetype fonts.

Tech note: The correct media-type for fonts has not been included in the official epub specification. We’re guessing that application/opentype will be the formal MIME-type, but it could eventually be something else. For instance, it could eventually be required to use font/otf instead. (Given how many epubs have already been created, once the MIME-type is formally specified it’s unlikely that epubs with the “wrong” MIME-type will not be valid.)

Fonts in the CSS

If you embedded fonts when you created the epub (e.g. when exporting from InDesign), the CSS file should already include the correct references to them. You can use this section to check that this has been done correctly.

If you’re embedding the fonts from scratch, then you still need to specify them in the CSS file.

• Open the CSS file (in a text/code editor as you did before)
• Usually at the top of the file, the embedded fonts should be listed in @font-face rules. They look something like this:

@font-face {
	font-family: "Linux Libertine";
	font-style: normal;
	font-weight: normal;
	src:url(fonts/LinLibertine_Re-4.1.8.otf);
}

Those lines (at least font-family and src) should appear for each font file you’ve included in the epub package. If they are not already there, add them. For each font file you’re including in the epub, match the appropriate combination of font-name, font-weight and font-style. (E.g. if you’re adding the file for an italic, the font-family will be the same as for the regular and bold files, but the font-style will be “italic” and the font-weight will be “normal”.)

Then, in the declarations for your paragraph, heading and inline/span elements, you simply specify the required font-family, font-weight and font-style, and the ereading system will fetch the correct file from the src you’ve specified in the @font-face rule.

Tech note: To know more about how @font-face works, see the Mozilla Developer Center for a good description.

Troubleshooting fonts

Some tips on troubleshooting common font problems:

• In the CSS file, check that the fonts directory named in the @fontface declarations is exactly the same (including the same case/capitalization for folders) as the actual path/folders in your OEBPS folder.
• If your italics look smaller than surrounding text: because CSS styles cascade, sometimes spans inherit sizing from their surrounding class. If your fonts are sized in ems, which are sizes that scale relative to their environment, spans re-size relative to their surrounding class (rather than in relation to the document or screen size). So: in your CSS, try commenting out (putting /* before and */ after) the lines that set the font size of italic spans. Then the span should simply inherit its font size only from the surrounding paragraph class. (Note: Watch for accidental knock-on effects where you actually DO want a span’s font size to be different from surrounding text. You may choose rather to just specify font sizes in px or pt.)
• Check that CSS style names are all in lowercase only. InDesign makes all caps in style names lowercase during epub export. If you edit the CSS file and accidentally use an uppercase letter, the CSS will not be applied for that style.

Further reading

This post by Liza Daly covers font-embedding issues in a concise, useful way.