Thursday, December 16, 2010

Embedding Fonts in iBooks 1.2



Actually, you've been able to embed fonts since iBooks 1.12, but you needed iOS 4.2 to make it work. I'll go over it anyway, because it's awesome.

First, you need to use OpenType Fonts. They have the .otf extension. It looks like TrueType fonts (with the .ttf extension) and on which OpenType fonts are based, are also OK. Remember that getting a font into your ebook is only a part of the battle. You also have to have the permission to distribute the font with your book. Read the font license carefully.

Once you have a font file that you want to embed for your ebook, there are two steps you have to follow. First, you have to use an @font-face rule at the top of your CSS file.

Something like this:

@font-face {
font-family: "FontName";
font-style: normal;
font-weight: normal;
src: url(../fonts/Fontname.otf);
}


I have not found much correlation between specifying a font-style or font-weight in the @font-face rule and success. That is, sometimes I've found that for an italic font you have to specify font-style: italic and sometimes you have to specify font-style: normal, which makes little sense, but that's the way it goes. It does seem necessary to create an @font-face rule for each and every style of every font you want to embed.

The next step is to use the fonts that you've now embedded in the actual style rules of your document:

p {font-family: "FontName";
font-size: 2em;
...
}


It's important that the font name you use be the official one. Any multi-word names should be enclosed in quotes.

The third step is to place the OTF font files in a fonts folder within your OEBPS folder in your EPUB document. If the actual font files aren't in there, they won't be embedded.

And finally, you have to declare those font files in the manifest of your EPUB:

<item id="fontname" href="fonts/fontname.otf" media-type="application/x-font-otf" />

(You can find more details on the manifest in my EPUB Straight to the Point book.)

You can use any id as long as it's unique. Make sure the path accurately reflects where you plced the OTF file. And be sure and use "application/x-font-otf" for the media-type.

And you're done! Here's a screenshot from one of Apple's new illustrated books with a new font. Note that Apple has used the font, Filosofia Regular, for the body text, even though their Publication guidelines expressly discourage such usage. They use various forms of Caecilia for the notes and inline headers.

EmbedFonts

And herein lies one of the main problems with the new "illustrated books" in iBooks 1.2. The reader can't change the font, and the reader can't change the font size. The text in this particular book is really hard to read. I'm racking my brain trying to figure out why this is better than a PDF, but I don't get it yet.

15 comments:

  1. The new iBooks really comes with a lot new stuff but I noticed something on this book from Ansel Adams "In the national parks". Somehow the books wrapper you see peeking out around the pages when you have it open is in a different style than all the other books I took a look at before and I am wondering how they managed that! Any clue on how this works, I would love to know.
    P.S.: I know this is a little offtopic but I was kind of in a hurry here and didn't find a other way to contact you!
    P.P.S.: I apologize for any spelling and grammer errors in here, english isn't my strong language :D

    ReplyDelete
  2. Fixed layout demands for fixed font-sizes. If you have reflow than your layout is not realy fixed anymore...
    "Why this is better than a PDF?" - because it is xhtml and css ;.)

    ReplyDelete
  3. The correct use of @font-face is quite easy!

    Let's say, we want to use the font named "MyFont" in different font variants (e.g. regular, italic, bold, bold-italic). You need to specify @font-face 4 times!


    @font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: normal;
    src: url(fonts/MyFont_regular.otf);
    }

    @font-face {
    font-family: "MyFont";
    font-style: italic;
    font-weight: normal;
    src: url(fonts/MyFont_italic.otf);
    }

    @font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: bold;
    src: url(fonts/MyFont_bold.otf);
    }

    @font-face {
    font-family: "MyFont";
    font-style: italic;
    font-weight: bold;
    src: url(fonts/MyFont_boldItalic.otf);
    }


    You can now use "MyFont" as a "font-family" value in every CSS-rule without specifying if you want to use the italic or the bold font-variant. Because it chooses by itself!!

    p {
    font-family: "MyFont", sans-serif;
    font-weight: bold;
    }

    would automaticaly load the bold-Font-file!


    Quite comfortable if you combine it with small-caps... Have a try ;-)

    Best regards,
    Toby


    P.S.: Interested in a free WIN EPUB-Checker? Download at: http://www.pagina-online.de/software/epub-checker/

    ReplyDelete
  4. Would it be possible to post an ePub that shows embedded fonts working? I tried with Fontin OTF and Fontin Sans OTF and I could not get either to display.

    ReplyDelete
  5. Sorry, but why was my first comment deleted?!
    ---------------------------------------------

    The correct use of @font-face is quite easy!

    Let's say, we want to use the font named "MyFont" in different font variants (e.g. regular, italic, bold, bold-italic). You need to specify @font-face 4 times!


    @font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: normal;
    src: url(fonts/MyFont_regular.otf);
    }

    @font-face {
    font-family: "MyFont";
    font-style: italic;
    font-weight: normal;
    src: url(fonts/MyFont_italic.otf);
    }

    @font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: bold;
    src: url(fonts/MyFont_bold.otf);
    }

    @font-face {
    font-family: "MyFont";
    font-style: italic;
    font-weight: bold;
    src: url(fonts/MyFont_boldItalic.otf);
    }


    You can now use "MyFont" as a "font-family" value in every CSS-rule without specifying if you want to use the italic or the bold font-variant. Because it chooses by itself!!

    p {
    font-family: "MyFont", sans-serif;
    font-weight: bold;
    }

    would automaticaly load the bold-Font-file!


    Quite comfortable if you combine it with small-caps... Have a try ;-)

    Best regards,
    Toby

    ReplyDelete
  6. @Toby: I don't see it deleted... the new comment was in the spam filter, but now that both are here, it just looks repetitive. Can't you see the first one? (And thanks, very useful.)

    ReplyDelete
  7. @Liz: ah, okay... I was just wondering why the comment disappeared when checking the page this morning...
    now I see both and if you want, you might delete the second one ;-)

    ReplyDelete
  8. Related to fonts, in the case you do not have font permissions (most people don't unless they are an ethically conscious designer) — here are a couple of website references for FONT NAMES for different computer operating systems if you want to have your epub ready for readers on a regular computer.

    For Windows & Macintosh:
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    For Linex:
    http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/

    In Liz's book, there is a section on embedding fonts, proper font names and what they look like for the iPad, and how to include font name information so that the ereader used will pick up the right information for displaying a font.

    I am working on finding out if there are different names for the other ereaders as well and will comment what I find out.

    ReplyDelete
  9. The page is attractive, and it's exciting to see some real typography on the iPad, but I agree, I don't see why this is better than PDF in a decent PDF viewer. But at least it's getting somewhere.

    ReplyDelete
  10. Hi Liz, I remember Pagina Uno a publishing company in Barcelona... I've some books (faxivisa, ...).

    I've got a problem with this. I have ok the template.css with Toby explanations but the epub not shows embedded fonts. I Tried with Minion otf.

    Would it be possible to post an ePub that shows embedded fonts working?

    ReplyDelete
  11. I tried this technique to embed courier new font in an ePub. It didn't work on iBooks latest update. is there something I might be missing. Here is the CSS:

    @font-face {font-family: "Courier New";font-weight: normal;font-style: normal;src: url(../Fonts/CourierNew.otf);}
    @font-face {font-family: "Courier New";font-weight: bold;font-style: normal;src: url(../Fonts/CourierNewBold.otf);}
    @font-face {font-family: "Courier New";font-weight: normal;font-style: italic;src: url(../Fonts/CourierNewItalic.otf);}

    body {
    font-family: "Courier New", serif;
    }


    .sceneHeading {text-align:left; margin: 12pt 0 0 0; text-transform:uppercase; background-color: #CDCDCD;}
    .action {text-align:left; margin: 12pt 0pt 0pt 0pt;}
    .character {text-align:left; margin: 12pt 0 0 40%; ; text-transform:uppercase;}
    .dialogue {text-align:left; margin: 0 20% 0 20%;}
    .parenthetical {text-align:left; margin: 0 35% 0 35%;}
    .transition {text-align:right; margin: 12pt 0 0 0; text-transform:uppercase;}
    .shot {text-align:left; margin: 12pt 0 0 0; text-transform:uppercase;}
    .castList {text-align:left; margin: 12pt 0pt 0pt 0pt;}


    The required fonts are embedded in the ePub in OTF format and equivalent entry is made in manifest. Moreover if I preview the ePub in Sigil ePub editor it shows the font rendering correctly but not in iBooks. Please help.

    ReplyDelete
  12. @sachin:
    Your approach is absolutely right.
    Seems as if Apple would ignore it...

    ReplyDelete
  13. @sachin:
    I just tested the whole issue and can confirm your mentioned problem.

    And I also have a solution for that:
    You declared the "font-family" in the "body" element. iBooks seems to ignore all custom-fonts in the body tag.
    Instead, declare >> font-family: "Courier New", serif; << for the "p" element. That works quite well...

    ReplyDelete
  14. I have embedded fonts showing in Sigil and Calibre but not iBooks. Have added com.apple.ibooks.display-options.xml file to the META-INF folder (copied the sample in the apple guide) and still not working. Also tried specifying font in the "p" element of 'Three men in a boat' and still not working in iBooks. Post all procedures required please.

    ReplyDelete
  15. Liz, Toby - can anyone suggest the procedure for Indian languages like Telugu. iOS has support for telugu and apple is providing Telugu Sangam font. But I want to use my own font instead of default font. Please help...

    ReplyDelete

More of my books