How to Embed Fonts in an Epub or Kindle ebook @font-face

embed fonts in an ebook
2 page spread of embedded fonts in an epub e-book: Click for larger image, hit the BACK button to return to post.

Licensing Use

IMPORTANT: Many typeface licenses DO NOT allow embedding on websites or in ebooks using @font-face. When choosing a typeface / font to embed, make sure you have the legal right to do so.


Many authors want to spice up their pages by adding attractive typefaces and fonts. This can add a lot of interest to your book IF you don’t overdo it.

What you need to embed fonts

  • Include your fonts in your ebook
  • List your fonts in the CSS first
  • Link to font

Step 1

Finding a Typeface:

Embedding Fonts with @font-face
Embedding Fonts with @font-face

 

There are literally thousands to choose from and many are free for the using. But is more better? Not always. I find that I stick with about 12 typefaces for page layout. I call them my apostles, and they cover the basics of what I need: serif, san-serif, heavy, thin,fancy, plain, grunge. I recommend you find a few typefaces you like and keep them organized on your computer.


LINGO TO KNOW
Typeface: In typography, a typeface is the visual representation or interpretation of a set of characters; it is their appearance. Each typeface is designed, and there are thousands of different typefaces in existence, with new ones being developed constantly. Wikipedia


Resources: I like to use Linotype (paid),  DaFont.com (free) and FontSquirrel.com as my sources for finding typefaces when designing book covers.

TTF or OTF?

Should you use a True Type Font (TTF) or Open Type Font (OTF)? Both should work, but in my testing I found OTF to work better in the long run. (at least for me.)

When I have a TTF I want to use that is being obstinate – not displaying correctly all the time – then I convert it to an OTF.

Resource: Convert your TTF fonts to OTF using this free Online Font Converter, http://onlinefontconverter.com/

Step 2:

Create the Cascading Style Sheet

The style sheet for you file can be either inline or a separate file. I either case, the fonts must be the first items listed. You need one declaration for each font (normal, bold, italic, etc).

CSS example of embedding fonts
CSS example of embedding fonts

LINGO TO KNOW
Cascading Style Sheet: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. Wikipedia


CSS

I prefer to name my fonts without spaces or underscores – just one word. If the name is two or more words then it MUST BE enclosed in quotes.

Example:

font-family: "Font Pro";

The CSS Code for Font Pro:
Substitute FontPro for the name of your chosen font.

@font-face {
font-family:FontPro;
src: url(../Fonts/FontPro-Regular.otf);
}

@font-face {
font-family:FontProBold;
src: url(../Fonts/FontPro-Bold.otf);
}

Step 3

Applying the font-family to your tags

In your CSS apply the font-family to the tags you want displayed as Font Pro.

h1 {
font-family: "FontPro";
}

Step 4

Adding the fonts to your ebook ‘package’.

The actual fonts need to be included with the file (.epub or .mobi). I prefer place all my fonts in a separate folder named “Fonts”. If you place them somewhere other than in a font folder then modify the CSS to the correct location.

NOTE: SIGIL automatically puts the fonts in the “Fonts” folder.

SIGIL font folder
SIGIL font folder

Excerpt from: Embedding Fonts: First Steps Supplement

Leave a Reply

Close Menu
×
×

Cart