Learn how to add custom fonts to your ebook in Kotobee Author using either online fonts or embedded fonts.
By default, Kotobee Author relies on system fonts, which are the fonts already installed on your computer. If you’d like to use additional fonts in your ebook, you have two options:
Online fonts
Embedded fonts
This guide explains the difference between these methods and provides step‑by‑step instructions for each.
You can add fonts in two ways:
Online fonts
With online fonts, your ebook loads the font from an external website (such as Google Fonts) each time it is opened.
While this option does keep your ebook file size smaller, it also has some limitations:
The font may take time to load, depending on the reader’s internet speed.
Readers must be connected to the internet for the font to appear. Otherwise, a default font will be used, potentially ruining your layout.
If the font is removed or relocated on the hosting website, the ebook will fall back to a default font, which may change the appearance of your layout.
Online fonts are suitable for internal distribution or environments where internet access is guaranteed.
Embedded Fonts
Embedding fonts is the preferred method. When you embed a font, you upload the font files directly into your ebook. The new font becomes part of your ebook, and although this slightly increases the file size, the font will always display correctly, even when the reader is offline.
Embedded fonts are ideal for publishing to stores or distributing standalone ebooks.
Fonts sources
You can find many free fonts online, including:
Adding an online font to your ebook
We’ll use Google Fonts as an example, but the same concept applies to any web-hosted font service.
Step 1: Choose a font
1. Open Google Fonts website.
2. Browse the available fonts or use Filters to search by name or category.
3. Select the font you want (for example, Roboto).
Step 2: Get the font CSS
After selecting your preferred font, click on it. It will then open the font family page where you can find different styles for the font you selected.
4. Click on the Get font button in the top right corner. You'll then be asked to choose whether you want to get the embed code or download the font family files.
5. Click Get embed code.
6. Locate the <link> tag and copy the URL inside the href attribute.
So in our example here, it’s this one:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Shantell+Sans:ital@1&display=swap" rel="stylesheet">
7. Copy only the URL inside the href attribute (not the entire link tag) then open it in a new browser tab to display the font’s CSS.
In our example, the URL from the script is https://fonts.googleapis.com/css2?family=Roboto
8. Open that URL in a new browser tab. A page containing CSS code will appear.
9. Copy all the CSS displayed on that page.
Step 3: Add the CSS to Kotobee Author
10. Open your ebook project in Kotobee Author to paste this CSS code.
11. Now you need to decide where you want to apply the new font.
Global CSS → applies the font to the entire ebook
Chapter CSS → applies the font only to the selected chapter
You’ll find both sections in the button bar in Kotobee Author.
12. Paste the copied CSS into the text area of the chosen CSS section.
Step 4: Apply the font to text
13. Return to the Google Fonts website and locate the section that indicates the font family rule. For our example, it’s:
font-family: "Roboto", sans-serif;
14. Next, you need to add a CSS rule specifying where the font should appear. Such as:
body{
font-family: "Roboto", sans-serif;
}Use body to apply the font to all text in the chapter/ebook.
Replace it with h1, h2, or custom classes to target specific elements.
Finally, add this line in the CSS text area in Kotobee Author, below all the CSS text you had previously pasted:
15. Click on the Apply and exit button at the top, then preview your chapter to confirm the font is displayed correctly.
Important
If the font does not appear after applying the CSS, make sure the text does not already have manual formatting applied beforehand, as Inline font styling can override your CSS rules.
To fix this, select the text in the editing screen, then click the Clear Formatting tool from the editor toolbar. After clearing the formatting, preview your ebook again to confirm the font is applied correctly.
Adding an embedded font to your ebook
To make your ebook fully offline-compatible, embed the font inside the ebook.
Step 1: Download the font files
1. Follow the first step used for online fonts to select a font in Google Fonts.
2. When you click on the Get font button, this time, click on the Download all button next. This will download the font in different available formats to your computer.
3. Extract the downloaded ZIP file, then keep only the font styles you’re planning to use. For our example, we only need the Roboto Bold font style.
Step 2: Convert the font format (if needed)
In order to import your preferred font style to your ebook, that file must be in WOFF or WOFF2 format for best ereader compatibility. And since you will not always find all the downloaded font file formats in the correct extension (for example, the ones we downloaded are in TTF format), you’ll need to convert them yourself.
4. To convert your font files, go to Transfonter.
5. Upload your chosen font file and make sure that WOFF and WOFF2 are selected as shown in the image below.
6. Click Convert, then download the generated files.
You should now have .woff and .woff2 files, plus a generated stylesheet.css and a demo file.
Step 3: Import fonts into your ebook
7. Open your ebook project in Kotobee Author
8. Click the File Manager button in the left panel of the Edit Screen to access your ebook's EPUB files.
9. Open the EPUB folder.
10. Click on the New Folder button to create a new folder. Name it fonts (no capital letters), then click on the check mark beside it to create it.
11. Open the fonts folder and click on the Import files button at the center, locate your converted WOFF and WOFF2 font files that you just created, and import them here. Then click on Exit File Manager in the top right corner.
Step 4: Add the fonts CSS
12. Open the stylesheet.css file generated by Transfonter.
13. Copy all @font-face blocks.
14. In Kotobee Author, paste the CSS code into either the Global CSS section or the Chapter CSS section. It all depends on where you want to apply the new font.
Global CSS → applies the font to the entire ebook
Chapter CSS → applies the font only to the selected chapter
You’ll find both sections in the button bar in Kotobee Author.
15. After pasting, edit the src path so it points to your fonts folder. To do that, add “../fonts/” before each font file name.
So the code will look like this:
@font-face {
font-family: 'Roboto Condensed';
src: url('../fonts/RobotoCondensed-Bold.woff2') format('woff2'),
url('../fonts/RobotoCondensed-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
Step 5: Apply the font to the text
16. Open the demo file generator by Transfonter.
17. Copy the text at the top that shows the font family rule. In our case it’s this part:
18. Next, you need to add a CSS rule specifying where the font should appear. For our example, we want to apply it to the body text of the ebook, so it should look like this:
body{
font-family: 'Roboto Condensed';
font-weight: bold;
font-style: normal;
}Use body to apply the font to all text in the chapter/ebook.
Replace it with h1, h2, or custom classes to target specific elements.
Finally, add this line in the CSS text area in Kotobee Author, below all the CSS text you had previously pasted:
19. Click on the Apply and exit button at the top, then preview your chapter to confirm the font is displayed correctly.
Important
If the font does not appear after applying the CSS, make sure the text does not already have manual formatting applied beforehand, as Inline font styling can override your CSS rules.
To fix this, select the text in the editing screen, then click the Clear Formatting tool from the editor toolbar. After clearing the formatting, preview your ebook again to confirm the font is applied correctly.