Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.
Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.
Publishers who have extensive experience in the print industry know that the fonts which are chosen when a book goes to print is an extremely important decision. However, this thought process must be radically changed when it comes to eBooks. Readers like to have complete control over the reading experience. One of the great things about eBooks is that readers can change the font to whatever is suitable for them. Perhaps they like Times New Roman (a serif font that was designed for newspapers). Perhaps they enjoy reading with an Arial font (a common sans-serif font). Perhaps they prefer to use some unique font that they found somewhere else (this can be done if by “jailbreaking” the Kindle). Everyone is different. For this reason, this guide discourages defining fonts on eBooks for content text. There is also the matter of contentious and confusing legalities regarding embedding fonts in eBooks. However, if you are determined to define a font for your content, it is possible to do so with the Kindle Fire.
The Core Kindle Fonts
The older e-ink Kindles and Kindle for iOS support two types of fonts: Palantino and Courier New (a mono-spaced font). Font embedding is not allowed; therefore, there is not much selection. |
| The two fonts of the e-ink Kindle/Kindle for iOS |
- Georgia (the default)
- Caecilia
- Trebuchet
- Verdana
- Arial
- Times New Roman
- Courier
- Lucida
 |
| Fonts Supported Natively by Kindle Fire |
To change fonts using CSS, here is the basic syntax for the property/value combination:
Note that the quotes are required on the font name if it has a space within its name, (e.g. "Times New Roman"). Also, ensure that you correctly capitalize the font name per the list above. It is standard practice to include "fallback fonts" in font-family declarations. The eReading device will attempt to load the fonts from left to right; so, if the first font is not recognized by the device for whatever reason, it will try to load the second one. It is also standard practice to have the last fallback font as one of the generic families (i.e. "serif", "sans-serif", or "monospace").font-family: "Font Name", "Fallback Font", "Another Fallback Font";
As an example, suppose we wanted a paragraph to have the Courier typeface with some Verdana inside. Some example CSS would be as follows:
p.courier{font-family: "Courier", monospace;}
span.verdana{font-family: "Verdana", sans-serif;}
 |
| Different Font Examples on the Kindle Fire |
Please try to experiment with different fonts, but remember to be careful about how you type in the font name in your CSS, or else it will not properly render.
Important Note: Due to anomalies in the Kindle Fire Previewer device, some typical fonts such as "Comic Sans" and "Helvetica" may appear to be working properly on the Previewer, but they will not work on an actual Kindle Fire. The only fonts that work "natively" on the Kindle Fire are the eight listed above. It may be wise to embed your fonts (as discussed below) if you cannot test your eBook on an actual Kindle Fire device.
Embedding Fonts
For those eBook designers who want to take things to the next level, you may wish to embed a font that is not supported natively in the Kindle Fire. Beware. You have to make sure you have the proper license and rights or you (or your client) can get your pants sued off by a bunch of low-life copyright trolls. One way to be sure that your desired font is okay to use commercially is to visit the Font Squirrel website. They have an outstanding selection of fonts to choose from, and you simply download the font file (in ttf and otf format) from different foundries. Make sure to read the license agreement from each specific foundry to verify that it is okay to embed in an eBook.Say you want to change the headings of your eBook to a font from an excellent open-source foundry, such as The League of Moveable Type. Let's try the Orbitron font to make our chapter headings more fancy. You need to declare the new font with an @font-face declaration at the beginning of your CSS. This defines a name for your font and points to the file. The file name is relative to the location of the CSS.
For this example, the Orbitron otf font has a filename of orbitron-medium.otf and is located in the same directory as the CSS file. To be able to use this font, the CSS is as follows:
You now can access the font "My Awesome Font" anywhere in your CSS the same way you would declare a core font. Declaring this font for all h2 headings would simply look as follows:@font-face{font-family: "My Awesome Font";src: url("orbitron-medium.otf");}
h2{font-family: "My Awesome Font", "Helvetica", sans-serif;font-size: 1.5em;text-align: center;}
 |
| Embedded Font in Kindle Fire |
Important Note: You also have to include the font file in the eBook package. This will be discussed later in the guide.
5 comments:
Awesome post, Paul! Thanks for the information. Much appreciated.
Thanks, Karen. Glad it was useful.
Hi Paul,
Very informative stuff you do. Thanks!
I'm curious, if you want to give the user total control, can you not pass a font face at all, leaving the (e)reader to load whatever font is default or chosen? That would seem to be the most compatible for the different ereaders and emulators out there.
Buzzby,
Absolutely. If you don't pass a font-face or make any font-family declaration, it will default to the user's preference. We recommend this approach. Hope that helps.
("open type");} wasn't at the end of your code. From all the forums I've read, that will cause the code to be stripped. I may be wrong, but I found it from the folks who format thousands of ebooks. (Several of them.)
Post a Comment