Learn how to add fonts to your ebook in Kotobee Author.
Two options for adding fonts:
- Embedded Fonts
- Embedding fonts is the preferred method. When you embed a font you upload the font to your ebook. The new font becomes part of your ebook and though it will slightly increase the size of your ebook file, the correct font will always appear, even when the ereader is offline.
- Online fonts
- With online fonts, every time your readers open your ebook, the ereader will go online to the website you provided to get the font you selected.
- While this option does keep your ebook file size to a minimum, there are three main problems:
- There may be a delay in the loading time.
- Your readers will need to be online in order for the font you selected to appear, otherwise a default font will appear instead, potentially ruining your layout.
- If the website removes the font or relocates it, the font will not appear, again a default font will appear instead, potentially ruining your layout.
The first steps for both methods are the same. At the end, there will be additional steps to embed the font in your ebook.
You can find countless free font sources online:
Our font source for these instructions will be Google Fonts.
We periodically check the screenshots below to make certain they are up-to-date. If you find that Google has changed their website, kindly let us know.
Online fonts
- Open Google Fonts.
- Select your font.
The main panel features sample fonts, with an editable preview of each. You can browse the fonts here. In the right panel, you can search fonts by name, or category and add additional filters. - Click on the + icon for the font you select.
The previous step will display a new bar at the bottom of the page, titled "1 Family Selected".
- Click on that bar to expand a new panel, giving you different export options.
- Locate the script showing the link to the CSS for that font in the panel. Specifically:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
- Open your ebook project in Kotobee Author, and click on the Global CSS button at the bottom right.
Grab the URL mentioned in that script (https://fonts.googleapis.com/css?family=Open+Sans) and paste it into your browser. You should find CSS text in your page, then copy this text. - Paste the font's CSS text into the text area. This CSS is what's needed to download the relevant fonts to the chapter. In this case, it will act as an online font. What's missing is to apply the font to certain parts of the chapter, or book globally.
- Go back to the font export panel in Google Fonts, you will notice a section that indicates the correct font family name to use:
Copy this CSS code so that you apply it in the next step to different parts of your chapter.
- Enter the following in the Global CSS text area in Kotobee Author, below all the CSS text you had previously pasted:
body{
font-family: 'Open Sans', sans-serif;
}
This will basically apply the new font everywhere in the chapter. If you only want to apply the font to headings, then you can replace body in the CSS with h1. You can apply the font to custom sections by adding a class attribute in the chapter's HTML code. - Preview the chapter, and you will find the font applied everywhere.
Embed font files
To add the font inside the ebook itself so that the ebook can work entirely offline, follow these additional steps:
- Download the font files onto your machine. Go back to the font export panel in Google Fonts, and click on the Download icon at the top right. This will download the font in different available formats to your computer.
- Click the File Manager button in the left panel of the Edit Screen to access your ebook's EPUB files in Kotobee Author.
- Open the EPUB folder.
- Click on the New Folder button to create a new folder. Name it fonts (no capital letters).
- Exit the File Manager, and go back into the Global CSS file. You will need to replace all the online font URLs with local URLs instead. Taking the few lines of the Open Sans CSS code as an example, you will replace
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
with:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}You will not always find all the font file formats among the downloaded files (e.g. woff2). If this is the case, there are two things you can do.
The first is to go to https://transfonter.org/ to convert different font formats and to create the missing ones.
The second and much easier method is to look at your original CSS from Google Fonts, copy the URL there, and paste it into your browser. In the previous example, the URL is https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2.
Once you go to this URL, the browser will save the font file to your machine where you can just copy it to your ebook's fonts folder. We recommend having both woff2 and woff fonts available. For example, Apple iBooks on desktop relies on woff2, whereas on iOS (iPhone and iPad) it relies on woff. Preview your chapter. You should now see the fonts applied and displayed correctly.
