-
Notifications
You must be signed in to change notification settings - Fork 0
Fonts
Typography is a key component of most e-books, unless you plan on creating an e-book that only uses images. For most e-book readers (both software and dedicated) the developers have handpicked a set of fonts they deem desirable for readers. In the case of Amazon and Google, both Bookerly and Literata respectively were chosen to be highly readable and highly recognisable from a branding perspective.
Both ePub (2.0.1 and 3.1) and Kindle support font embedding using .ttf or .otf font files. There are three considerations to keep in mind when using your own choice of font.
Decide whether your e-book will have custom fonts for the titles, headings or body-text and choose appropriately. Keep in mind that many users will adjust the font size, line spacing and colouration while reading and plan for most reading scenarios. A good e-book is adaptable!
Some e-readers reject custom fonts either partially (such as for body text) or fully. Keep this in mind and ensure you don't entirely rely on custom typography for your e-book.
Keep in mind that often licensing for e-book embedding is separate from the license to use the font in desktop applications and web development. Read the EULA and if necessary purchase the appropriate license, don't assume that you are covered. Fontspring sells fonts and clearly outlines how they can be used with many fonts covered for e-book embedding without additional licensing.
Alternatively some free fonts, particularly those under the SIL Open Font License (SIL OFL) can be embedded into any e-book (or software in general) without consequence. Websites such as Google Fonts and Font Squirrel offer free fonts, many of which can be embedded into e-books.
Custom fonts can be embedded with ebookbuild within the CSS, using the standard @font-face declaration which should be familar to most web developers. As of version 0.811 of ebookbuild there is support for potentially any number of custom font files. They are stored in the fonts directory by default though this can be changed in the metadata.json.
As an e-book developer it is up to you whether one or many custom fonts are used in your e-book project. For instance in the The Fall of Western Man project I used League Gothic Condensed for the headings to keep the e-book in-line with the original PDF. I used the following declaration at the top of the zstylesheet.css:
@font-face
{
font-family: "league_gothic";
font-style: normal;
font-weight: normal;
src: url("../fonts/leaguegothic-condensedregular.otf");
}
After the custom font has been declared, I then declared its usage for headings, along with a generic sans-serif fallback. An issue I encountered with League Gothic Condensed is that because it is condensed, when it is unavailable on an e-reader the headings look huge, hence the comment:
h1.heading
{
font-size: 2.4em; /*Originally 3em, but reduced to make e-book look better when League Gothic is unavailable.*/
font-family: "league_gothic", sans-serif;
font-weight: normal;
text-align: center;
color: #000;
margin-top: 0em;
margin-bottom: 0em;
}
For some e-book projects entire font families can be declared and used. For example, I have used IBM Plex for a study guide project I have been working on. I chose IBM Plex Sans, Serif and Mono for different parts of the guide with the Regular, Bold, Italic and Bold Italic weights. This is the CSS declaration I used:
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: normal;
font-weight: normal;
src: url("../fonts/IBMPlexSans-Text.otf");
}
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: italic;
font-weight: normal;
src: url("../fonts/IBMPlexSans-TextItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: normal;
font-weight: bold;
src: url("../fonts/IBMPlexSans-Bold.otf");
}
@font-face
{
font-family: "IBM-Plex-Sans";
font-style: italic;
font-weight: bold;
src: url("../fonts/IBMPlexSans-BoldItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: normal;
font-weight: normal;
src: url("../fonts/IBMPlexSerif-Text.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: italic;
font-weight: normal;
src: url("../fonts/IBMPlexSerif-TextItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: normal;
font-weight: bold;
src: url("../fonts/IBMPlexSerif-Bold.otf");
}
@font-face
{
font-family: "IBM-Plex-Serif";
font-style: italic;
font-weight: bold;
src: url("../fonts/IBMPlexSerif-BoldItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: normal;
font-weight: normal;
src: url("../fonts/IBMPlexMono-Text.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: italic;
font-weight: normal;
src: url("../fonts/IBMPlexMono-TextItalic.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: normal;
font-weight: bold;
src: url("../fonts/IBMPlexMono-Bold.otf");
}
@font-face
{
font-family: "IBM-Plex-Mono";
font-style: italic;
font-weight: bold;
src: url("../fonts/IBMPlexMono-BoldItalic.otf");
}