Trouble embedding font

[Azdaema]

I'm working on an epub of a story that contains text messages between the characters. I'm using a condensed version of this CSS and HTML. I want the reader to be able to pick their own font, per normal, for most of the story, but I want certain sections to be locked into the text message font.

I've had a lot of trouble embedding fonts, and even now that I think I've finally managed it (it says the font is embedded, and looks ok on the comupter) when I download the epub to my phone, the font is gone and we're back to whatever font the reader picks.

I try to talk myself into "that's fine," but it really doesn't look like texting when it's in a serif font. Help?

[theducks]

Look at you devices reader app. It must allow something like 'Publishers font' or styles. Not all do

Also: Did you verify your code? Calibres viewer tolerates a lot of bad/poor coding. RMSDK (ADE) is famous for tossing a poorly coded CSS. VALIDATE

[Azdaema]

My reader is the iBooks app on my iphone. Are you saying that even a completely properly embedded font will still not show up on some readers?

[thiago.eec]

Originally Posted by Azdaema

My reader is the iBooks app on my iphone. Are you saying that even a completely properly embedded font will still not show up on some readers?

For iOS, you need an extra step when producing your epub file.

For epub2:

You need to add this file to the META-INF directory:

com.apple.ibooks.display-options.xml

The contents of the file:

Spoiler:

<?xml version='1.0' encoding='utf-8'?>
<display_options>
<platform name="*">
<option name="specified-fonts">true</option>
</platform>
</display_options>

For epub3:
On the opf file, add the ibooks prefix to the <package> element:

<package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="isbn-id" prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/ a11y: http://www.idpf.org/epub/vocab/package/a11y/#" xml:lang="pt-BR">

Then, add a <meta> element inside the <metadata> element, like this:

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
    ...
    <meta name="cover" content="cover.jpg"/>
    <meta property="ibooks:specified-fonts">true</meta>
    ...
</metadata>

Of course, this sucks. Embedded fonts should work properly on iOS without this platform-specific property/file added.

[Azdaema]

Originally Posted by thiago.eec

For iOS, you need an extra step when producing your epub file.

For epub2:

You need to add this file to the META-INF directory:

com.apple.ibooks.display-options.xml

The contents of the file:

<?xml version='1.0' encoding='utf-8'?>
<display_options>
  <platform name="*">
    <option name="specified-fonts">true</option>
  </platform>
</display_options>

When I tried that, nothing. Is that what the file should say verbatim, or do I fill in the "specified-fonts" with the font name or something?

[thiago.eec]

Yes, verbatim.
Is this copyrighted material? If not, attach the file here so we can have a look at it.

Also, I just looked at the link you pointed as the CSS used. I don't see any @font-face rule. So, did you created a @font-face rule? Did you actually saved the font within your epub file?

If the font is just referenced with a font-family rule, then it might work on the computer (if you have that font on your system), but won't show on your device (where the font is not present).

[Azdaema]

In fonts.css I've got:

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

I've got the .ttf file in the fonts section.

The texting CSS in stylesheet.css is:

/* Texting wrapper */
.texting {
  max-width: 300px;
  font-family: "Helvetica Neue", sans-serif;
  display: table;
  margin: auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
/* All texts */
.text {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  max-width: 75%;
  clear: both;
  position: relative;
}
.text:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0.5em;
  height: 1em;
}
/* Outgoing (sent from this phone) */
.out {
  float: right;
  background: #1289fe;
  color: #FFF;
}
.out:after {
  right: -0.5em;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}
/* Incoming (reply from other person) */
.in {
  float: left;
  background: #e5e5ea;
  color: #000;
}
.in:after {
  left: -0.5em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

[thiago.eec]

Look, to further help you, I would have to take a look at the file. Send me via pm, if it is copyrighted material.

[JSWolf]

Originally Posted by Azdaema

In fonts.css I've got:

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

I've got the .ttf file in the fonts section.

The texting CSS in stylesheet.css is:

/* Texting wrapper */
.texting {
  max-width: 300px;
  font-family: "Helvetica Neue", sans-serif;
  display: table;
  margin: auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
/* All texts */
.text {
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  max-width: 75%;
  clear: both;
  position: relative;
}
.text:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0.5em;
  height: 1em;
}
/* Outgoing (sent from this phone) */
.out {
  float: right;
  background: #1289fe;
  color: #FFF;
}
.out:after {
  right: -0.5em;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}
/* Incoming (reply from other person) */
.in {
  float: left;
  background: #e5e5ea;
  color: #000;
}
.in:after {
  left: -0.5em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

It's not really a good idea to use multiple CSS. Just merge it all into one.

[Azdaema]

Here's the epub file, if that's what you're saying

[DNSB]

Just a quick look has me asking why you declare font-family "Helvetica Neue" for both your embedded fonts (one in fonts.css, the other in page-styles.css)?

@font-face {
    src: url(../Fonts/Helvetica-Neue.ttf);
    font-family: "Helvetica Neue";
    panose-1: 2 0 5 3 0 0 0 2 0 4
    }


@font-face {
  font-family: "Helvetica Neue";
  font-weight: normal;
  font-style: normal;
  src: url(../Fonts/Helvetica-Neue-1.ttf);
}

[Azdaema]

That happened when I was trying to upload the font. I'm not really sure why.

[thiago.eec]

Originally Posted by Azdaema

Here's the epub file, if that's what you're saying

I'm attaching the corrected file. Some pointers:

1) The apple settings file MUST be on the META-INF folder. It was not there. In the Editor, you can right-click the file and rename it like this: META-INF/com.apple.ibooks.display-options. Then it will be put on the META-INF folder.

2) This file MUST NOT be manifested. So, you MUST erase this entry from the content.opf:

<manifest>
    ...  
    <item href="com.apple.ibooks.display-options.xml" id="id" media-type="application/xml"/>
    ...
</manifest>

3) Like pointed by @JSWolf, no need to use multiple CSS files if they will be applied to the same file. Just merge them into one.

4) The font file was duplicated (causing the file to get bigger). One of then was referenced from font.css and the other from page_stylesheet.css (as pointed by @DNSB). Every font must be inserted only once, and then used along the css file using the font-family rule.

[Azdaema]

Thank you so much!! This is invaluable to me. I spent like a week of 1 ams trying to figure it out on my own.

[thiago.eec]

You're welcome! Glad it helped you.