InDesign CC - Embedding Fonts

One of the most appreciated improvements to InDesign with the new Creative Cloud edition is that it finally embeds fonts in a way that iBooks understands. Let's take a look.

In InDesign, there is always some font chosen for text. You can't have "none". When you export a book to EPUB, the default is for InDesign to "Include Embeddable Fonts"



The problem is that InDesign CS 6 doesn't do it right. Whether it's Adobe's fault or Apple's or the IDPF's, I've never been quite sure, but the truth is that there were two major problems: the font didn't get obfuscated properly and InDesign didn't account for iBooks' idiosyncracies (read: non-standard font requirements).

So, given this InDesign document:



InDesign CS 6 exports a file to EPUB that looks like this in iBooks:



My design surely lacks penache (it was designed to take advantage of the fonts that were available on the iPad in 2010), but if that's what I want, that's what I want InDesign to give me.

Now InDesign CC does. Notice both the Bradley Script for the headers and the Optima for the body text.



I heard that it finally got the obfuscation right (or in accordance with Apple), but the coding news is that it also caters to Apple's requirement of including the com file in the META-INF folder.



And here's what it looks like on the inside:



Apple's com file is totally non-standard (that is, not part of the EPUB3 spec), but regardless, if you want fonts to work in iBooks with an EPUB 2 file, that's what you need, and I think Adobe made a great decision by including that file automatically so we don't have to crack open the EPUB to add it ourselves. Since the com file doesn't affect other ereaders or validation, there's nothing to be lost in adding it, and everything to be gained.

Note that I said EPUB 2, but InDesign CC actually includes the com file in EPUB 3 exports as well. That's not perfect—since Apple now follows the spec for declaring font usage in a meta element in EPUB 3—but it still works and better yet doesn't break anything. And given Adobe's dedicated support for EPUB lately, I'm confident that they'll roll the new behavior into InDesign CC soon.

One small caveat: remember that if you have Preserve Local Overrides unchecked and you've applied fonts with an override, then you shouldn't be surprised if the fonts don't make it to the EPUB file.

Seravek Font bug in iBooks

I wanted to set my latest book in a sans-serif font so I chose one of iBooks' default fonts: Seravek. This morning, doing a last minute check, Seravek had mostly disappeared. I immediately suspected nefarious setting adjustments by iPad-stealing family members, but it turns out iBooks was the culprit.

Look at this:



If you don't know what Seravek is, I'll tell you, it's not that.

I recompiled my book a bunch of times, looked at it on my old iPad and everywhere, the font had disappeared. I wondered if iBooks had somehow changed between yesterday and today. If Kindle Previewer was going to update itself without my involvement, maybe iBooks too?

Then I changed the font size:



And the Seravek came back. Weird. It turns out that Seravek works fine in all font sizes except 5. And in font size 3, it doesn't work in the subhead, but I wonder if that has to do with caching, since I had that set as a serif font for a while (though not in this example!)



Since there's no other sans-serif default font for iBooks, and I didn't want to use Optima, in the end, I decided on Muli, one of Google Web Fonts offerings:



Remember that readers can always select a default font if they so choose.

Embedding fonts in iBooks without bugs

Pablo Defendini posted an error to the #eprdctn group on Twitter this morning and Susan Neuhaus quickly concurred. Both posted screenshots and code. Chris Casey quickly googled a bug report and solution on StackOverflow. Amazing collaborative group!

I found the bug report a little hard to understand and tried to recreate the problem. But I couldn't. I tweeted back to Pablo who recommended I experiment with Google Web Fonts, which is what he had used. And lo and behold, I discover a whole treasure of open source fonts available for commercial use and embeddable in EPUB books. I send a heads-up to Eric Hellman who is doing a similar project with funding ebooks up front so that they too can be free. The Zen of Ebook Production.

I had looked at Google Web Fonts ages ago when it was still just on the web. You had to link to them and there was the worry that if Google went down, so would your fonts. This also made them unavailable for EPUB use. No longer. Now you can download Google Web Fonts (and there are some really nice ones) and embed them in your own books. Of course, you don't have to use Google Fonts, all the info here is valid for any embedded TrueType or Opentype font. Here's what you do:

Use this code in your CSS:

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

NixieOne is the name of the font I used. The name you use for font-family shouldn't matter, but I have found that sometimes it does. To be safe, double-click the downloaded .ttf or .otf file, and use the name that's listed in the menu. You don't need to install it to use it for EPUB.

The font-weight and font-style items are required. It seems, though I find this unclear in the CSS3 spec (info welcome), that these should not be necessary as they are the default values. However, Webkit (on which Safari and iBooks are based), does not default to them, and without them, will not allow you to apply bold or italic formatting at all. So, use them!

Then in your CSS, when you want to use the font for a given selector, use font-family, as shown here:

h1 {
     font-family: NixieOne;
     ...
     }

And now back to the bug in iBooks. It turns out that if you embed a font—seems that it happens with both TrueType and OpenType fonts—and that font is formatted in bold, then iBooks will render it incorrectly, most noticeably with thinner fonts and at larger sizes. (This is a simple, single stroke font and should not look this blurry.)



Note that it doesn't matter if you set the font-weight: bold yourself as in:

p {
     font-family: NixieOne;
     font-weight: bold;
}

or if it's in the default stylesheet for the selector as in:

h1 {
     font-family: NixieOne;
     }

Since h1 (h2, h3, etc.) are all bold by default, this text will also be rendered incorrectly:



The solution is to first remove the bold:

h1   {
      font-family: NixieOne;
      font-weight: normal;
}

and then, if desired, create the bold with something other than font-weight. The folks at StackOverflow recommended -webkit-text-stroke and text-shadow.

Here's 1px stroke:

h1   {
      font-family: NixieOne;
      font-weight: normal;
      -webkit-text-stroke: 1px black;
}



and with 2px stroke:

h1   {
      font-family: NixieOne;
      font-weight: normal;
      -webkit-text-stroke: 2px black;
}



and here's text-shadow with a value of 1px:

h1   {
      font-family: NixieOne;
      font-weight: normal;
      text-shadow: 1px 1px #000;
}



I think all three are reasonable options and the choice depends on aesthetics more than anything else.

More thanks for helping figure this all out. Paul Irish for his @font-face gotchas page. Webkit for explaining -webkit-text-stroke. And finally to Sandra Williams, who sent me this page just as I was finishing this post. Someone else will have to follow through with that code—especially given the caveat about Safari at the end. Still, it looked interesting.

Embedding Fonts in EPUB- iPad, iPhone AND nook

I don't know how I missed this. I did see that Apple had published a new iBookstore Assets guide in late March, and I looked through the “changes in version 4.6” section pretty closely. But today I noticed something new: iBooks now supports embedded fonts even in regular, reflowable, non-fixed layout EPUBs.

That's not all. I noticed while I was testing this feature that Apple no longer restricts embedded fonts to non-special tags, as I describe on page 140 of my EPUB book. This is a really big deal, and means you can forget the ugly hacks previously required to get them to appear. If you want to use any of the 33 font families that come pre-installed in iOS (they are listed with samples in my book), you can simply call them in the CSS rule (skipping @font-face and the special file explained below).

And, and, and that's still not all. The really cool part is that the same code works on the nook too. Ooh, cross-platform font embedding in EPUB. I like it!

Here's how to embed fonts into an EPUB book:

First, add the font to your book files in the normal way, by adding an @font-face statement at the beginning of your CSS, something like this:

@font-face {
font-family: Prophecy Script;
font-style: normal;
font-weight: normal;
src:url("Fonts/Prophecy_Script.ttf");
}

That makes the font available. To apply it to your text, you have to add it to one of your styles, also in the CSS:

p.letter {
    font-family: "Prophecy Script";
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-hyphens:none;
}

And then make sure your HTML actually uses one of those styles:
<p class="letter">Warren Cty Ky March 11th</p>

The last step is to add a com.apple.ibooks.display-options.xml file in your META-INF folder. (If you don't know where that is, my EPUB book will be helpful.) The com.apple.ibooks.display-options.xml file is required for Fixed Layout EPUBs, but it looks like Apple is expanding its use.

The file should have a line like this one:

<option name="specified-fonts">true</option>

Put it all together, and you can get something like this:



Here's what it looks like on the nook (which I wish allowed screenshots!)



The font that I used is pretty similar to my great-great-grandmother's handwriting, and was designed by Michael Tension from Tension Type, and generously made available on Dafont.com. Remember to check font licenses before embedding them in your EPUB files.

Finally, if you're curious, you can see the original letter too.

And perhaps more importantly, you can download the sample file (I don't guarantee that it's free of that pesky iTunesMetadata.plist file.)

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.



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.

iBooks is Buggy

Frustrated with iBooks refusal to play nice with text alignment and with fonts, I downloaded a new book from Gutenberg, Mark Twain's The Jumping Frog, and started fresh. I created the simplest of simple InDesign files, without adding any formatting at all, and then exported the whole thing to EPUB. It was pretty ugly.

One of the things that I haven't understood about the whole Apple-neglects-to-support-standards debacle is how their iPad User Guide (download it from the iBookstore) stays left-aligned even when I've got Full Justification set to its (absurd) default position of ON.



How do they do it?

There's no clue in the CSS. Not even so much as an !important: (And don't imagine that that text-align:left should have an effect; iBooks ignores it in favor of the Full Justification position in the iPad's general settings.)



Grasping at straws, I tried using Apple's style sheet with my (ok, Twain's) text, changing only the classes in my p elements to match the styles in Apple's CSS.



iBooks was clearly not fooled.

I took a step back. I changed only two paragraphs in my XHTML file, one header and one paragraph. And lo and behold iBook suddenly remembered how to style a paragraph with a different font:


How can that be? That's the exact same CSS and the exact same XHTML, except that instead of all the paragraphs being marked with the main body text class, only one of them is. There is nothing significantly different.

But look how not only the font is maintained, but also the left alignment. (In all of these examples, Full Justification is ON in Settings.)

Was it only Apple's lovely choice of Verdana? No, I could choose other fonts, like American Typewriter.

Was it the style names themselves that held some sort of magic? No, I could create my own style names with the same style definitions that Apple had used.


Was it the style definitions? No, I could use style definitions that I had used on other projects.


What then? I stopped fussing with the CSS and started fussing more with the XHTML. This time I tried formatting several more paragraphs. It still works:



Emboldened, I try a few more pages:


They still work. I push it just a little further. And I hit the wall. All I changed was the class of a few more paragraphs in the XHTML, and suddenly, all I get is Palatino, full justified, throughout the book, from the first page to the last.


There are some interesting things to note here. First of all, that same paragraph that now appears in Palatino was not altered at all between the penultimate test and this one. I only changed the classes in a few paragraphs at the end of the document, and that is what triggered the loss of all of the font and alignment formatting.

Further, note that the leading and font-size are maintained even as the font family and justification are lost.

I spent all day working on this, and didn't find a solution. I'm not sure there is one. I think its just a buggy program. I'm curious as to why Apple's iPad User Guide doesn't show up in the specified font, but still stays left-aligned. I haven't figured that out yet. In my tests, the font formatting is listened to at the same rate as the alignment.

For those who would say, "Apple recommends not choosing fonts" I would point out that they themselves choose fonts for their own publications, including the iPad User Guide.

And to those who marvel at this waste of time, I would caution that we must all speak up for standards, lest you soon join me in this fruitless exercise of trial and error.

Palatino bug in iBooks on iPad

[Update: With iBooks 1.1, Apple has changed much of the system for applying fonts. Please read Apple damaging ePub standards with pseudo-support and Apple kills fonts in iBooks, strikes blow to standards.]

I discovered a big and important bug in iBooks on the iPad: if you don't have some text specified as Palatino (in some form or other), no other fonts will be displayed and everything will display in Palatino.

So, imagine you have this for your CSS:

p.palatino {font-family:"Palatino";}
p.other {font-family:"Optima";}

In the XHTML, the first paragraph is styled with the palatino class, and the rest is other.

Since Palatino is explicitly called, everything is displayed correctly:

Now, you decide you don't really want Palatino, but would prefer Zapfino. Your CSS now looks like this:

p.palatino {font-family:"Zapfino";}
p.other {font-family:"Optima";}

Here's where the bug kicks in. Since there is no paragraph explicitly or implicitly styled with Palatino, iBooks freaks out and makes everything Palatino:

There are various solutions. As you can see with the first example, if Palatino is called for and used explicitly, everything is fine.

But you don't actually have to call the font explicitly, you can just call no font (which in effect also means Palatino, since that's the default font in iBooks). I've tried this with explicitly font-related styles, like font-size, and with less font-related properties like text-align. As long as there's some selector with at least one rule, and that doesn't specify a font, you're good:

p {text-align:left;}
p.other {font-family:"Optima";}

And again, it works fine:


Ah, but what if you don't want Palatino in your ebook at all? If you remove it from the XHTML, even if you leave it in the CSS, iBooks goes nutso again:

The solution is to leave a Palatino style in your CSS, with display:none if you like and call that style at least once in your XHTML.

CSS:
p.palatino {font-family:"Palatino";display:none;}
p.other {font-family:"Optima";}

XHTML:

<p class="palatino"> </p>

And voilà: no Palatino, and the Optima (or whatever other font you want), displays perfectly well!

More fonts for eBooks on iBooks on the iPad

[Update: With iBooks 1.1, Apple has changed much of the system for applying fonts. Please read Apple damaging ePub standards with pseudo-support and Apple kills fonts in iBooks, strikes blow to standards.]

Just a few minutes ago, I wrote that there were 10 possible fonts you could use when designing eBooks to be read with iBooks on the iPad, but it turns out there are several more, 44 according to this site, with 109 font styles in all.

I tried them out to make sure they work in iBooks on the iPad and sure enough, they did:







That is, most of them did. I’m not sure what I’m doing wrong with Zapf Dingbats but I can’t get it to work at all, not even in TextEdit. And I don’t have sample text for the non-Latin alphabets.

Here’s the full list. If you view this page on the iPad, you should see all the font names displayed with the corresponding font. On a desktop computer, they’ll only display correctly if you have them installed in your system—and most of them do not come standard with either the Mac or Windows OS.

Remember: many of these also have additional styles (bold, italic, etc.). I’ll see if I can get a full table up.

• Academy Engraved LET: The quick brown fox jumps over the lazy dog.
• American Typewriter: The quick brown fox jumps over the lazy dog.
• AppleGothic: The quick brown fox jumps over the lazy dog.
• Arial: The quick brown fox jumps over the lazy dog.
• Arial Rounded MT Bold: The quick brown fox jumps over the lazy dog.
• Baskerville: The quick brown fox jumps over the lazy dog.
• Bodoni 72: The quick brown fox jumps over the lazy dog.
• Bodoni 72 Oldstyle: The quick brown fox jumps over the lazy dog.
• Bodoni 72 Smallcaps: The quick brown fox jumps over the lazy dog.
• Bodoni Ornaments: abcdefghijklmnopqrstuvwxyz
• Bradley Hand: The quick brown fox jumps over the lazy dog.
• Chalkduster: The quick brown fox jumps over the lazy dog.
• Cochin: The quick brown fox jumps over the lazy dog.
• Copperplate: The quick brown fox jumps over the lazy dog.
• Courier: The quick brown fox jumps over the lazy dog.
• Courier New: The quick brown fox jumps over the lazy dog.
• DB LCD Temp: The quick brown fox jumps over the lazy dog.
• Didot: The quick brown fox jumps over the lazy dog.
• Futura: The quick brown fox jumps over the lazy dog.
• Futura Condensed Extra Bold: The quick brown fox jumps over the lazy dog.
• Georgia: The quick brown fox jumps over the lazy dog.
• Gill Sans: The quick brown fox jumps over the lazy dog.
• Helvetica: The quick brown fox jumps over the lazy dog.
• Helvetica Neue: The quick brown fox jumps over the lazy dog.
• Hoefler Text: The quick brown fox jumps over the lazy dog.
• Marker Felt: The quick brown fox jumps over the lazy dog.
• Optima: The quick brown fox jumps over the lazy dog.
• Palatino: The quick brown fox jumps over the lazy dog.
• Papyrus: The quick brown fox jumps over the lazy dog.
• Snell Roundhand: The quick brown fox jumps over the lazy dog.
• Times New Roman: The quick brown fox jumps over the lazy dog.
• Trebuchet MS: The quick brown fox jumps over the lazy dog.
• Verdana: The quick brown fox jumps over the lazy dog.
• Zapf Dingbats: The quick brown fox jumps over the lazy dog.
• Zapfino: The quick brown fox jumps over the lazy dog.

There are also a number of non-Latin alphabet fonts:

• Arial Hebrew
• Geeza Pro (for Arabic)
• Arial Hebrew
• Heiti J, K, SC, and TC (for Chinese)
• Hiragino Kaku Gothic ProN (for Japanese)
• Hiragino Mincho ProN (for Japanese)
• Thonburi (for Thai)

OK, can't resist. Just wanted to prove that they really do show in the iPad:

Using new fonts from Kernest on Blogger

Are you sick of Times and Helvetica? Not to mention Trebuchet, Gadget, Arial, and Courier? It seems crazy in this day and age where you can output a gorgeous print document with beautiful fonts that the Web still be limited to a very short list of fonts. Especially since CSS has been capable of handling many more fonts for more than 10 years. But font foundries were wary of setting their fonts free and browser companies like Microsoft, Netscape, and Apple couldn't quite agree on what font format to support.

Thankfully, not everyone has been waiting around to see what shakes out, and have taken matters into their own hands. One of these guys is Garrick Van Buren, a developer in