Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor

Notices

Reply
 
Thread Tools Search this Thread
Old 11-01-2019, 11:58 PM   #1
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
Trouble embedding font

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?
Azdaema is offline   Reply With Quote
Old 11-02-2019, 01:17 AM   #2
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 24,202
Karma: 27941849
Join Date: Aug 2009
Location: The Central Coast of California
Device: K4NT, Galaxy Tab A, Kobo Aura2
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
theducks is offline   Reply With Quote
Advert
Old 11-02-2019, 01:40 AM   #3
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
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?
Azdaema is offline   Reply With Quote
Old 11-02-2019, 05:29 AM   #4
thiago.eec
Addict
thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.
 
Posts: 232
Karma: 71602
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by Azdaema View Post
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:
Code:
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:
Code:
<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:
Code:
<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.
thiago.eec is offline   Reply With Quote
Old 11-02-2019, 03:21 PM   #5
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
Quote:
Originally Posted by thiago.eec View Post
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:
Code:
com.apple.ibooks.display-options.xml
The contents of the file:
Code:
<?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?
Azdaema is offline   Reply With Quote
Advert
Old 11-02-2019, 07:30 PM   #6
thiago.eec
Addict
thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.
 
Posts: 232
Karma: 71602
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
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).

Last edited by thiago.eec; 11-02-2019 at 07:39 PM.
thiago.eec is offline   Reply With Quote
Old 11-03-2019, 01:02 AM   #7
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
In fonts.css I've got:

Code:
@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:
Code:
/* 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;
}
Azdaema is offline   Reply With Quote
Old 11-03-2019, 03:49 AM   #8
thiago.eec
Addict
thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.
 
Posts: 232
Karma: 71602
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Look, to further help you, I would have to take a look at the file. Send me via pm, if it is copyrighted material.
thiago.eec is offline   Reply With Quote
Old 11-03-2019, 09:41 AM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 54,427
Karma: 51273184
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by Azdaema View Post
In fonts.css I've got:

Code:
@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:
Code:
/* 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.
JSWolf is offline   Reply With Quote
Old 11-07-2019, 12:10 AM   #10
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
Here's the epub file, if that's what you're saying
Attached Files
File Type: epub Texties.epub (135.5 KB, 10 views)
Azdaema is offline   Reply With Quote
Old 11-07-2019, 12:36 AM   #11
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 6,535
Karma: 29910991
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Aura One, Aura H2O, Aura HD, Nexus 7 HD, iPad Air, Tolino epos
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)?

Code:
@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);
}
DNSB is offline   Reply With Quote
Old 11-07-2019, 12:52 AM   #12
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
That happened when I was trying to upload the font. I'm not really sure why.
Azdaema is offline   Reply With Quote
Old 11-07-2019, 07:50 AM   #13
thiago.eec
Addict
thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.
 
Posts: 232
Karma: 71602
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by Azdaema View Post
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:
Code:
<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.
Attached Files
File Type: epub Texties.epub (79.4 KB, 12 views)

Last edited by thiago.eec; 11-07-2019 at 07:54 AM.
thiago.eec is offline   Reply With Quote
Old 11-07-2019, 03:12 PM   #14
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
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.
Azdaema is offline   Reply With Quote
Old 11-08-2019, 10:01 AM   #15
thiago.eec
Addict
thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.thiago.eec knows who John Galt is.
 
Posts: 232
Karma: 71602
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
You're welcome! Glad it helped you.
thiago.eec is offline   Reply With Quote
Reply

Tags
font, font embedding, font epub

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Embedding font in books that already have embedded font Barty Calibre 2 10-17-2013 12:38 AM
Font Embedding? teh603 Writer2ePub 75 01-08-2013 08:57 PM
Font embedding sachin Sigil 36 03-30-2012 04:26 AM
Font embedding sachin Sigil 3 03-21-2012 10:19 AM
Do I need a font license if all I'm doing is referring to the font (not embedding)? Stodder Workshop 21 04-21-2011 05:19 AM


All times are GMT -4. The time now is 03:07 PM.


MobileRead.com is a privately owned, operated and funded community.