Adding Google Fonts to your EPUB
Google Fonts is probably the most popular free font library available today, giving you a selection of more than 800 font families to choose from. Although most ebook readers force the option of changing the font type, to provide user comfort and convenience, some readers don’t. As the author, you may want to use your own selected fonts as headings in the ebook, or even for the whole body of text.
Theoretically, fonts can be embedded inside your EPUB, or accessed remotely from Google’s servers. In the real world, every reader has its own policies and rules, prohibiting certain stuff. The EPUB standard however, permits loading fonts online and applying them in the chapter. The EPUB specification leaves little room for ambiguity on this topic.
Online fonts
The main advantage of online fonts is that it will not increase your ebook file size. The font will be fetched from Google’s servers only once the user opens a chapter that uses that font. Although this may sound desirable, there are two big disadvantages. Firstly, your user needs to be connected online to use this font. As mentioned, each ebook reader has its own policies, and may prohibit downloading files to the ebook. Secondly, there will be a short delay between downloading the font and applying it to the appropriate text. This short delay may cause a flicker, where the correct font replaces a default one. Although not a big deal to many, the flicker may make the ebook seem “unprofessional”.
Embedded fonts
Embedded fonts are the way to go if you are aiming to have your ebook available offline, without any reliance on internet connectivity. The only disadvantage is that since ebook files will be part of the EPUB, the file size may increase slightly. Of course, it may increase significantly if you are using a large number of fonts.
Step-by-step tutorial
In this tutorial we will use Google Fonts as an example, to apply online fonts to our EPUB. Note however, you are not strictly tied to it. You can apply the same concept to any font file(s) you download from the Internet.
1. Open http://fonts.google.com in your browser
You will see a listing of different fonts along with an editable preview of each. You can browse around to find the font you need, or you can filter by certain criteria in the right panel. If you already know the font name, you can simply search for it from the top right corner.
2. Select the appropriate font
Click the red + icon for the font of your choice. Note that you can select multiple fonts.
3. Export the font
Once you have selected any font, you will find a new bar appearing at the bottom of the page, labeled “1 Family Selected”. If you have selected more than one font, then it will indicate the number of fonts. Click on the bar, to open the font export panel.
This panel basically contains everything you need – Google is very friendly with instructions. But to simplify things further for you, there are two items which you need from this panel. The first is the link HTML code, that you will insert inside your chapter’s <head> tag. This will reference the font files from Google’s servers. The second thing is the correct CSS font name for this font family.
4. Apply the font CSS to your chapter
Using your favorite EPUB editor, you should add the link HTML code inside the chapter’s <head> tag. Now depending on what you want the font applied to, you will be adding different CSS. The EPUB editor should provide you with a way to enter custom CSS. If you want to apply the font to the entire body of text, then you will assign the CSS properties to the body tag as follows:
body {
font-family: 'Open Sans', sans-serif;
}
If you would like to apply it to Headings (first and second level), then it will look like:
h1, h2 {
font-family: 'Open Sans', sans-serif;
}
You can assign the font to selected sections of your text. You can do this using CSS classes. So your HTML would look like:
<p>This is a sentence in standard font</p> <p class="special">This will be in special font</p>
And the appropriate CSS would look like:
.special {
font-family: 'Open Sans', sans-serif;
}
Having your fonts offline
The basic idea is to download the fonts to your computer, and embed them inside the EPUB. This is what you aim to achieve. Every EPUB editor has its own details around doing this. In Kotobee Author, the File Manager allows you to see the internal structure of the EPUB archive (for a good understanding of the EPUB file structure, this is a recommended read: Alice in EPUB-Land). The File Manager will give you the flexibility of adding your own font files into your EPUB, and then reference them from the chapter.
For more specific steps on doing this in Kotobee Author, please refer to this tutorial.
You might also like:
How to edit EPUB books manually
How to create an interactive ebook: A step-by-step guide
