Embedding Typekit Fonts in EPUB

Community Beginner ,
Feb 26, 2020 Feb 26, 2020

Copy link to clipboard

Copied

Hello,

 

I'm working on a reflowable EPUB 3 and am having trouble with properly embedding Typekit fonts.

 

I'm using three typefaces (Adobe Caslon Pro [OTF], Korolev [OTF], and Montserrat [TTF]). All three exported from InDesign CC 2020 with no errors or warnings. Their files appeared in the fonts folder, as did the encyrption file in the META-INF folder.

 

Initially, all three fonts render correctly when the epub is viewed in iBooks, Adobe Digital Editions, and Chrome, but when I move the epub off my desktop to a mobile device (iPad), the fonts do not display. If I disable these fonts in Typekit, the fonts no longer display on my desktop in iBooks, ADE, or Chrome, leading me to believe that these platforms were drawing on the system font files (synced from Typekit) instead of the obfuscated fonts in the fonts folder.

 

To make sure the @font-face in my CSS was correct, I cut-and-pasted a non-obfuscated font file directly from my Mac's local fonts folder into the fonts folder in the EPUB and adjusted the CSS to point to it. This font displayed without a problem in Chrome, iBooks, and ADE on desktop, as well as iBooks on iPad. This indicates that the XHTML and CSS files are set up properly.

 

This has led me to conclude that the error must lie with either 1) Typekit's or InDesign's obfuscation/subsetting export or 2) the encryption file or encryption/decryption process.

 

Any insight or help is appreciated!

 

Edit: Attaching the epub file for reference. This is from a version I exported straight out of InDesign, and then went through and tore out all of the actual content of the ebook to get the file size down. Because of this, the .opf file, etc. is a mess, but the font files are just as InDesign exported them, and you can open the text.xhtml file in a browser and take a look.

 

And for further clarity, this is what the test.xhtml file looks like (with Korolev and Caslon specified in the CSS, but Typekit syncing is turned off, so they default to the obnoxious fallbacks Impact and Papyrus):

 

Actual appearance.png

If I turn on Typekit syncing, the fonts magically work again:

 

Desired appearance.png

...but Chrome is only drawing on the system fonts and not the obfuscated files in the font folder of the epub.

TOPICS
EPUB, Type

Views

708

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Community Beginner , Mar 04, 2020 Mar 04, 2020
So after trying to reproduce the problem again with a fresh file, I was finally able to track down what was causing the trouble.  Turns out that some part of the font fetching/de-encrypting/rendering process relies on the InDesign-auto-generated dc:identifier in the metadata of the .opf file. Since the main dc:identifier needs to be unique, I'd changed this to the ebook's ISBN, and this had (somehow) broken the font rendering. By restoring the identifier to the original (a long alphanumerical st...

Likes

translate

Translate

Translate
Adobe Community Professional ,
Feb 26, 2020 Feb 26, 2020

Copy link to clipboard

Copied

I would suggest you change the TT font to an OTF one, and experiment with some other fonts --i.e. simpler typography. Consider checking the ePub with a validator, such as Flightdeck https://ebookflightdeck.com $15 for one month.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 27, 2020 Feb 27, 2020

Copy link to clipboard

Copied

Hi Derek. Since I'm working with two OTF fonts and one TTF, this problem doesn't seem to be specific to TTF fonts. Furthermore, I can manually embed both OTF and TTF unobfuscated/subset font files into the epub without any problems.

 

I have run the epub (which is finished apart from these typography issues) through EPUB-Checker and Ace by Daisy (it's accessible as well) and have not encountered any issues. And Adobe Caslon Pro is one of Adobe's oldest fonts (not exotic by any means), so I doubt this issue is limited to new or unusual Typekit fonts.

 

As for "simpler typography," I've enlisted several fallback typefaces for each of my CSS classes, but it's more the principle of the thing. I don't remember ever having been able to properly embed Typekit fonts in an epub (it just irked me more this time), so if I can't the problem sorted out now I'll make a habit of avoiding Typekit fonts altogther and pre-empt the problem.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 04, 2020 Mar 04, 2020

Copy link to clipboard

Copied

So after trying to reproduce the problem again with a fresh file, I was finally able to track down what was causing the trouble. 

 

Turns out that some part of the font fetching/de-encrypting/rendering process relies on the InDesign-auto-generated dc:identifier in the metadata of the .opf file. Since the main dc:identifier needs to be unique, I'd changed this to the ebook's ISBN, and this had (somehow) broken the font rendering. By restoring the identifier to the original (a long alphanumerical string beginning with "urn:uuid:"), the link to the fonts was restored as well.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

Thank you! This was super helpful. Annoying that we cannot input ISBN into metadata as well as the unique code when initially exporting the data. I use flightdeck to add it and re-export after running the platform checks. It's brilliant. 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines