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

Embed Font in e-book
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 UPDATE: TRAJAN PRO is an Adobe font whose license DOES NOT allow embedding on websites or ebooks using @font-face. See comment section on details and links to Adobe licensing.

When choosing a 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) and DaFont.com (free) 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

This Post Has 12 Comments

  1. Grace Brannigan

    Just found this via a yahoo search. I am trying to find a way to have one font only show up in an ebook I’m making for Kindle. I generally use Calibre, but I’m not real technical minded when it comes to doing it a different way. I want to make an edition out of the free typeface Open Dyslexic. I have downloaded the font and need to figure out how to have it show up after the conversion. I looked at Kindle’s pretty easy tutorial instead of using Calibre, but they don’t address embedding fonts that I can see and they haven’t gotten back to me. Is there a simple way to do this like zipping the 4 font files when I upload to Kindle?

    1. admin

      Grace, First I apologize the images were not displaying in the post – this has been corrected.

      To embed a font requires getting into the actual file and manipulating the style sheet.

      First, you add the fonts to your epub or mobi package.

      You then need to declare the font in your styles using @font-face, making sure the name and font location link is correct.

      Then apply the font to your manuscript styles using the attribute font-family: (ie/ the body content

      or chapter headings

      ).

      The entire book is then Zipped and uploaded to B&N or Kindle.

      Embedded fonts can be tricky to use and apply and not all of them display correctly. I do not recommend embedding fonts unless it is absolutely necessary. In many cases the user has chosen a default font for reading on their devices.

      also, before you use any font, you need to make sure you have the legal rights to embed them in the ebook.

      Hope this helps,

      Suzanne

  2. Annie

    Can you enlighten me more about the CSS file? How do i make that? Is that a text file that i will save as “.css”?

    Thanks

    1. admin

      The CSS file can be complicated if you have never made one. You can create one using your Text editor and saving it with the extension .css, such as style.css.

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

      p {
      text-indent:2em;
      }

      h1 {
      font-family:FontPro;
      }

      You can learn more about CSS here: http://www.w3schools.com/css/

      Hope this helps,

      Suz

  3. Annie

    Can you enlighten me more about the CSS file? How do i make that? Is that a text file that i will save as “.css”?

    Thanks

    1. admin

      The CSS file can be complicated if you have never made one. You can create one using your Text editor and saving it with the extension .css, such as style.css.

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

      p {
      text-indent:2em;
      }

      h1 {
      font-family:FontPro;
      }

      You can learn more about CSS here: http://www.w3schools.com/css/

      Hope this helps,

      Suz

  4. Joseph

    Is it legal to embed Trajan Pro in an ePub book? I can’t wrap my head around Adobe’s licensing terms … but I assumed it wasn’t allowed, since they have a special service set up for website embedding, and ePub embedding seems to be even more squirrely as far as licensing goes.

    I would love to use it if possible.

    Thanks!

    1. admin

      My choice of Trajan Pro was a bad example for embedding in ebooks as Adobe doesn’t allow it.

      The entire process IS confusing, but ultimately the answer is no.

      This page

      http://www.adobe.com/type/browser/info/embedding.html

      states:

      All fonts in the Adobe Type Library can be embedded in Adobe Portable Document Format (PDF) files, as well as other types of electronic documents. Many can also be modified for internal use. To view a list of the specific permissions for all fonts in the Adobe Type Library refer to Adobe’s Font Permission List.

      They do not specify the “other electronic formats.”

      From the Adobe Font Permission List (Fonts for print and preview embedding (PDF))

      All of the fonts in the Adobe® Type Showroom are set for Preview & Print embedding, which allows the font, either fully or as a subset, to be embedded in an electronic document solely for the purpose of viewing that document on screen and/or printing that document.

      And from the Editable embedding PDF of Adobe Font Permission List it states:

      “Several fonts in the Adobe® Type Library, including all Adobe Originals typefaces, other Adobe-owned typefaces and certain third-party font foundry typefaces, allow for editable embedding. Fonts with an editable embedding permission can be embedded in electronic documents, and the embedded font can then be used by the recipient of the electronic document to view, print and further edit or modify the text and structure of the document in which it is embedded. Below is a listing of the font families that allow for editable embedding.”

      However, from the FAQ on the Adobe site it states:

      http://www.adobe.com/products/type/licensing-faq.html

      Why doesn’t Adobe allow its fonts to be used with @font-face?

      When a font is used on the web with @font-face, it is made available on a server for a browser to download and use. Doing so exposes the font to both piracy and unintentional misuse. Services like Typekit provide extra layers of protection for fonts to help reduce those risks.

      So… it appears Adobe Fonts (Trajan Pro) is not allowed in ebooks as well since you would be using @font-face.

      Thank you for pointing this out and I will adjust the post to reflect this information.

      Suzanne

      1. Joseph

        Okay, thanks – I really appreciate your taking the time to reply. I ended up finding an alternative font with an ePub license on fontspring.com … hopefully in time more foundries and distributors will offer purchasable ePub licenses for their fonts.

        Best wishes!
        Joseph

  5. Joseph

    Is it legal to embed Trajan Pro in an ePub book? I can’t wrap my head around Adobe’s licensing terms … but I assumed it wasn’t allowed, since they have a special service set up for website embedding, and ePub embedding seems to be even more squirrely as far as licensing goes.

    I would love to use it if possible.

    Thanks!

    1. admin

      My choice of Trajan Pro was a bad example for embedding in ebooks as Adobe doesn’t allow it.

      The entire process IS confusing, but ultimately the answer is no.

      This page

      http://www.adobe.com/type/browser/info/embedding.html

      states:

      All fonts in the Adobe Type Library can be embedded in Adobe Portable Document Format (PDF) files, as well as other types of electronic documents. Many can also be modified for internal use. To view a list of the specific permissions for all fonts in the Adobe Type Library refer to Adobe’s Font Permission List.

      They do not specify the “other electronic formats.”

      From the Adobe Font Permission List (Fonts for print and preview embedding (PDF))

      All of the fonts in the Adobe® Type Showroom are set for Preview & Print embedding, which allows the font, either fully or as a subset, to be embedded in an electronic document solely for the purpose of viewing that document on screen and/or printing that document.

      And from the Editable embedding PDF of Adobe Font Permission List it states:

      “Several fonts in the Adobe® Type Library, including all Adobe Originals typefaces, other Adobe-owned typefaces and certain third-party font foundry typefaces, allow for editable embedding. Fonts with an editable embedding permission can be embedded in electronic documents, and the embedded font can then be used by the recipient of the electronic document to view, print and further edit or modify the text and structure of the document in which it is embedded. Below is a listing of the font families that allow for editable embedding.”

      However, from the FAQ on the Adobe site it states:

      http://www.adobe.com/products/type/licensing-faq.html

      Why doesn’t Adobe allow its fonts to be used with @font-face?

      When a font is used on the web with @font-face, it is made available on a server for a browser to download and use. Doing so exposes the font to both piracy and unintentional misuse. Services like Typekit provide extra layers of protection for fonts to help reduce those risks.

      So… it appears Adobe Fonts (Trajan Pro) is not allowed in ebooks as well since you would be using @font-face.

      Thank you for pointing this out and I will adjust the post to reflect this information.

      Suzanne

      1. Joseph

        Okay, thanks – I really appreciate your taking the time to reply. I ended up finding an alternative font with an ePub license on fontspring.com … hopefully in time more foundries and distributors will offer purchasable ePub licenses for their fonts.

        Best wishes!
        Joseph

Leave a Reply