Many times you will find interesting fonts online that you would like to use in your ebook, rather than the default set. A very popular and free font provider is Google Fonts, where you can search in over 800 font families for a suitable font for your ebook. The font files you add can either be embedded inside the ebook, or hosted online. 


Online fonts


The main advantage of online fonts is that it will not increase your ebook file size. Only once the user enters a chapter that relies on this font, it will be fetched online, and applied immediately. Although sounds desirable, there are two disadvantages. Firstly, your user needs to be connected online to use this font. Note that some ebook readers prohibit downloading files to the ebook. Secondly, there will be a short delay between downloading the font and applying the font, where the text will be rendered using a default replacement font. Although not a big deal to some, the flicker may be a big issue for others and seem "unprofessional".


Embedded fonts


Embedding fonts into your ebook will slightly increase the size of your ebook file. The main advantage here is that the ebook can remain offline, and access the font locally without being connected online. If ebook file size is tolerable, then surely go for this option.


Step-by-step instructions


We will use Google Fonts as our font source, since it will make the process easier for you. Note that Google periodically enhances its interface, so its possible to find a few changes from the screenshots used below.


1) Open http://fonts.google.com in your browser



2) 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.


3) Click on the + icon for the font you select.



4) The previous step will 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 your different export options.



5) In the panel you will find a script showing the link to the CSS for that font. Specifically:


<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


Grab the URL mentioned in that script (https://fonts.googleapis.com/css?family=Open+Sans) and paste it in your browser. You should CSS text in your page. Copy this text.


6) Open your ebook project in Kotobee Author, and click on the Global CSS button at the bottom right.



7) 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.


8) If you go back to the font export panel in Google Fonts, you will notice this section that indicates the correct font family name to use:



Copy this CSS code such that you apply it in the next step to different parts of your chapter.


9) In the Global CSS textarea in Kotobee Author, below all the CSS text you had previously pasted, enter the following:


body{
font-family: 'Open Sans', sans-serif;
}


This will basically apply the new font everywhere in the chapter. If you only would like 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.


10) Preview the chapter, and you will find the font applied everywhere.


Embedding font files


To have the font residing inside the ebook itself, to have the ebook entirely working offline, follow the following additional steps:


1) The first step is to 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 differently available formats to your computer.



2) In Kotobee Author, click the File Manager button at the bottom right.



This will open the File Manager which allows you to control the internal EPUB structure of your ebook.


3) Go into the EPUB folder, and create a new folder named "fonts".



4) Enter this folder (by double-clicking) and import all the font files in that folder.


5) 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;
}


Note that you will not always find all 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://onlinefontconverter.com to convert between different font formats, to create the missing ones. The second (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) relies on woff.


6) Preview your chapter. You should now see the fonts applied and displayed correctly.