Embedding a font into an ePub file

Embedding a font into an ePub file

Reasons for embedding a font

There could be multiple reasons behind embedding a font in an ePub file.

  • Language support
  • Aesthetics

If a passage of the ePub document, or the whole document is in a language that’s not commonly supported, there is a chance that characters for this language are not available on certain eBook readers. If this is the case the document will not be displayed properly. Embedding a font that contains characters from the particular language will help maximize the chances that the document is displayed in the intended fashion.

An eBook designer might feel the need to use a certain font in a document to better help convey the message.  If a more exotic font is used, that font might not be available on certain readers. In this case, a substitute font might be used by the reader, and the intended look and feel of the book would be lost. To avoid such issues, it’s a good practice to embed the more exotic fonts used into the document.

Please Note: Some fonts are fairly large in size, and will increase the overall document size when embedded. Reducing the overall font size and embedding only a part of the fonts will not be covered in this article.

Adding the font

To embed a font into an ePub file, first pick the right font. Currently only OTF type fonts are supported according to the ePub documentation.

A font can be embedded either manually or using an ePub authoring application such as Sigil (available as freeware here). It’s a good practice to add both the font and CSS markup using either the manual method, or using an authoring tool such as Sigil. Mixing both methods might create unexpected results.

Embedding a font using Sigil

Sigil is one of the open source ePub authoring tools that some of our customers use.  We will use this for illustrative purposes to show you how to add fonts to an EPUB file.

Embedding a font using Sigil is a fairly simple process. To do so, first open the ePub using Sigil. In the ePub file browser on the left side of Sigil, there should be a folder called “Fonts”. Select it, and then click the “Add Existing Files” button from the tool ribbon on the top. Then select the desired font and click “Add”. This will add the font to the ePub and take care of declaring the font in the ePub manifest. Save the file. All that is left is to go to the CSS file used by the ePub and utilize the newly embedded font in the document. This will be described in a section below.

Embedding a font manually

To manually add a font in an ePub file, we must first extract the ePub file’s contents. This is easily done using a tool such as 7zip or WinZip. After extracting the document locate a folder called “OPS” inside of the ePub. Note that this folder might have a slightly different name, but it will still hold all of the files associated with the ePub such as images, xHTML files and fonts. Inside of the OPS folder, create a new folder and name it “Fonts”, if such a folder doesn’t already exist. Then copy and paste the font to be embedded in the “Fonts” folder. In the root of the OPS folder, there should be a file with an .OPF extension. This is the file that contains the ePub manifest, or in other words, a list of every file contained within the ePub. Open the .OPF file and locate the <manifest> tag. Insert the following line, right before the </manifest> closing tag. Substitute the <FONT NAME> section for the file name of the font without the extension.

<item href=”Fonts/<FONT NAME>.otf” id=”<FONT NAME>.otf” media-type=”application/vnd.ms-opentype” />

Now save and close the .OPF file.

Once you are done with all of the edits on the ePub, we should compress the document back using a tool such as 7zip or WinZip. The document should be compressed to a zip format and the extension changed to .epub.

Using an embedded font in an ePub

In this section we will go through using an embedded font in an ePub file. Note that this is standard CSS markup and it isn’t described in the ePub definition. This must be done after we have embedded the file into the ePub document using Sigil or the manual method. If the ePub doesn’t contain a CSS file, one needs to be created. This article will now cover the creation of and working with CSS files. A basic knowledge of CSS will be required to complete the next step.

To get started locate the CSS file used in the ePub document. If there are multiple CSS files, pick the one controlling the page that is needed to use our newly embedded font. Open the CSS file using Sigil, or a text editor, depending on which tool was used to embed the font, and navigate to the top. Insert the following section at the top of the CSS file. Make sure there are no conflicts, with a similar section already contained in the CSS file. For more information on the @font-face section, please refer to http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-selection

@font-face {

font-family: “<FONT NAME>.otf”;

font-weight: normal;

font-style: normal;

src: url(“../Fonts/<FONT NAME>.otf”);

}

As before, substitute the <FONT NAME> tag for the actual file name of the font. There could be multiple sections like this for different font styles or weights, one section per style/weight combination. One or more different fonts can be used for each combination.

After the font face is defined, we need to declare which elements of the document will be using the new font. If we want the whole document to use it this should be defined in the body following the example below. Note that we should use either “serif” or “sans-serif” depending on the font and document. For more information on how to use a font in CSS, please refer to www.w3schools.com

body

{

font-family: “<FONT NAME>.otf”, serif;

}

4 thoughts on “Embedding a font into an ePub file

  1. This solution is not working for me, unfortunately. I’m getting partial results, with list (OL, UL) items coming up with a non-serif font and non-list items coming up with serif fonts. Very frustrating. I’m using Sibil to view the EPUB contents and have tried various settings in the stylesheet.

  2. Hi,

    I embeded my font as you said. I have everything arranged on the folders. In a lot of epub readers the fonts do not display currectly (firefox reader;e-books reader… and I think it is not working on ibooks my client tablet) but in some yes ( like UB Reader )

    @font-face {
    font-family:”Helvetica”;
    src:url(Fonts/helr45w.otf);}

    @font-face {
    font-family:”Helvetica”;
    src:url(Fonts/helr46w.otf);}

    @font-face {
    font-family:”Helvetica”;
    src:url(Fonts/helr65w.otf);}

    @font-face {
    font-family:”Cleanvertising”;
    src:url(Fonts/CLEANVEL.otf);}

    @font-face {
    font-family:”itc new Baskerville”;
    src:url(Fonts/NEWBAIOF_1.OTF);}

    @font-face {
    font-family:”itc new Baskerville”;
    src:url(Fonts/NEWBASBI_1.OTF);}

    AND on the http://validator.idpf.org/application/validate I have this errors

    ERROR OEBPS/css/elartedevolversesinutil.css 43 1 ‘OEBPS/css/Fonts/Idealist.otf’: referenced resource missing in the package.
    ERROR OEBPS/css/elartedevolversesinutil.css 49 1 ‘OEBPS/css/Fonts/Idealist-Light.otf’: referenced resource missing in the package.
    ERROR OEBPS/css/elartedevolversesinutil.css 54 1 ‘OEBPS/css/Fonts/helr45w.otf’: referenced resource missing in the package.
    ERROR OEBPS/css/elartedevolversesinutil.css 58 1 ‘OEBPS/css/Fonts/helr46w.otf’: referenced resource missing in the package.
    ERROR OEBPS/css/elartedevolversesinutil.css 62 1 ‘OEBPS/css/Fonts/helr65w.otf’: referenced resource missing in the package.
    ERROR OEBPS/css/elartedevolversesinutil.css 66 1 ‘OEBPS/css/Fonts/CLEANVEL.otf’: referenced resource missing in the package.
    ERROR OEBPS/css/elartedevolversesinutil.css 70 1 ‘OEBPS/css/Fonts/NEWBAIOF_1.OTF’: referenced resource missing in the package.
    ERROR OEBPS/css/elartedevolversesinutil.css 74 1 ‘OEBPS/css/Fonts/NEWBASBI_1.OTF’: referenced resource missing in the package.

  3. Should you be using a relative reference for the src url for example
    @font-face
    {
    font-family:”Helvetica”;
    src: url(../Fonts/helr65w.otf);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *