View Full Version : Another problem embedding font


Alabala
07-25-2012, 05:12 AM
I am creating an ebook written in Cyrillic using InDesign. I need to embed a Cyrillic font (my choice goes to GentiumPlus) in its epub version in order to make sure it displays correctly. My problem is, Digital Editions keeps showing ??? symbols when I test the document.
For the past few days I've gone through various threads, posts and tutorials on embedding fonts and have tried different solutions. I have tried embedding my font both using the InDesign option and manually, following the instructions I found (adding the font; editing the .opf and the .css files). So far, the epub displays correctly, with the embedded font, in Calibre and various browsers (IE, Chrome) but not in ADE.
What am I doing wrong? Any observation are greatly appreciated.

Here's a part of the css file (I've also specified the font family in every individual paragraph style):

@font-face {
font-family: "Gentium Plus", serif;
font-style: normal;
font-weight: normal;
src:url ("../font/GentiumPlus-R.ttf");
}
@font-face {
font-family: "Gentium Plus", serif;
font-style: italic;
font-weight: normal;
src:url ("../font/GentiumPlus-I.ttf");
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
font-family: "Gentium Plus", serif;
margin:0;
padding:0;
border-width:0;
}

And the one from the opf file:

</metadata>
<manifest>
<item id="GentiumPlus" href="fontGentiumPlus-R.ttf" media-type="application/truetype "/>
<item id="GentiumPlus" href="fontGentimPlus-I.ttf" media-type="application/truetype "/>

Toxaris
07-25-2012, 05:34 AM
There might be an issue here. As you can see in your OPF, the directive is wrong. It says 'fontGentiumPlus-R.ttf', but I would expect font/GentiumPlus-R.ttf'.
I don't know if you use Sigil, but be aware that you need the directory to be Font instead of font. The stuff is case sensitive.

I will check it with one of my books to be sure.

*Edit: I checked with one of my books. The mediatype in the OPF is different to what I have. I have: media-type="application/x-font-ttf" instead of media-type="application/truetype " (also note the space there...)

Otherwise it looks fine.

Jesver
07-25-2012, 05:44 AM
Hi,

your declarations is fine. I think css path may be vary. So you have to create the Fonts folder in css folder and call like this.

src:url(Fonts/fontname.ttf);

Toxaris
07-25-2012, 07:08 AM
No, it is not fine. The OPF is not correct. The CSS is correct, but depends on the actual file structure. Case sensitivity is of the essence here.

Aerys
07-25-2012, 07:21 AM
@font-face {
font-family: "Gentium Plus", serif;
font-style: normal;
font-weight: normal;
src:url ("../font/GentiumPlus-R.ttf");
}


You might want to drop the ", serif" in the "font-face" declaration.

@font-face {
font-family: "Gentium Plus";
font-style: normal;
font-weight: normal;
src:url ("../font/GentiumPlus-R.ttf");
}

Plus location of the font should be correct (including capitalization of the letters of the font/directory).

Alabala
07-25-2012, 10:28 AM
Thank you all for your responses, you guys are great. I finally made it work by going through several additionnal steps.

I was using a "font" directory (without capitalization) since I've noticed that InDesign was doing so when the embed font option was checked upon export. I suspected, therefore, that the directory location was not the problem per se. However, I tried capitalizing both the directory and the corresponding fields in the .opf and .css. That didn't change anything.

However, the media-type problem pointed by Toxaris made me think that there was probably more than one issue out there. I decided to download Sigil (I didn't think it was necessary, but it was this step that helped my figure it out) and to check the document with it.

Sigil revealed that there was indeed a media-type error. More importantly, it detected that my font was "present in the OPF <manifest>, but not reachable (it's unused)". Instead of trying to correct my old epub, I embedded the fonts directly through Sigil, in a new document, which corrected the .opf. Since I was still getting the error, I had to get rid of the blank space in "src:url ("../Fonts/..." and change it to "src:url("../Fonts/...". That made it work perfectly. Finally, I also got rid of the "serif" in @font-face, as suggested by Aerys.

Here's the corrected parts of the. opf and .css in case that could help someone:

<item href="Fonts/GentiumPlus-I.ttf" id="GentiumPlus-I.ttf" media-type="application/x-font-ttf" />
<item href="Fonts/GentiumPlus-R.ttf" id="GentiumPlus-R.ttf" media-type="application/x-font-ttf" />
</manifest>

@font-face {
font-family: "Gentium Plus";
font-style: normal;
font-weight: normal;
src:url("../Fonts/GentiumPlus-R.ttf");
}
@font-face {
font-family: "Gentium Plus";
font-style: italic;
font-weight: normal;
src:url("../Fonts/GentiumPlus-I.ttf");
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
font-family: "Gentium Plus";
margin:0;
padding:0;
border-width:0;
}

Jesver
07-26-2012, 04:49 AM
Hi,

I am sure opf is not a problem for ADE view. If you are define wrong in opf, just through error not affect in ADE View. So check it your font path and css.

JSWolf
07-27-2012, 04:33 PM
You do not set margins to 0 for a blockquote. That's just wrong. Also setting margins to 0 for hall the header styles is plain wrong too.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
font-family: "Gentium Plus";
margin:0;
padding:0;
border-width:0;
}

This style set is just a mess.

Jellby
07-28-2012, 05:42 AM
It's OK if later rules add margins where desired.

JSWolf
07-28-2012, 12:13 PM
It's OK if later rules add margins where desired.

It's not really OK. It's still messy code.

AlPe
07-28-2012, 01:40 PM
You do not set margins to 0 for a blockquote. That's just wrong. Also setting margins to 0 for hall the header styles is plain wrong too.


I do not see why your statement should be true in any arbitrary situation.

For example, I might want to have blockquotes identified by a different text style, rather than a greater margin w.r.t. the normal text.

Am I missing something of your reasoning?

JSWolf
07-28-2012, 04:02 PM
I do not see why your statement should be true in any arbitrary situation.

For example, I might want to have blockquotes identified by a different text style, rather than a greater margin w.r.t. the normal text.

Am I missing something of your reasoning?

If you don't want to use margins with a blockquote, then don't use a blockquote. The purpose of a blockquote is to have margins around all sides of a block of text.

AlPe
07-28-2012, 04:07 PM
Nope. You are mixing the semantic value of a blockquote with its (default) presentation.

The purpose of a blockquote is to insert a long quotation (not inline with the main text).

If you just want margins around a piece of text, define a div o p class, with suitable margins.

EDIT: see, for example, http://www.w3.org/TR/html401/struct/text.html#h-9.2.2 where later you can read:


The usage of BLOCKQUOTE to indent text is deprecated in favor of style sheets.


or http://www.w3.org/TR/html5/the-blockquote-element.html#the-blockquote-element.

Jellby
07-29-2012, 04:03 AM
It's not "messy", Jon, it's pretty clean and straight. It may be over-zealous , unnecessary, or you may not like its result. But as coding, it's good and clean code: just make sure all those elements have no margins and they all use the same font, at least as a starting point to which further styles may be added.

I'm not saying we should all use it, and it probably won't be useful in many situations. But in a particular case, if an author knows what he's doing, it's perfectly right. Of course, as part of software-generated code, it's unnecessary and a sign of "smartiness".

JSWolf
07-31-2012, 10:06 AM
Technically it's not messy. But usage wise it's a mess.

HarryT
07-31-2012, 11:11 AM
Technically it's not messy. But usage wise it's a mess.

Jon, the fact that you don't personally like it does NOT mean that it's wrong. You really need to stop thinking that anyone whose views differ from your own is "wrong". It is possible for people to have differing opinions on things, and many things (this included) are not "black and write".

JSWolf
07-31-2012, 12:37 PM
A blockquote (for example) is supposed to have margins all around it. The margins can be changed based on what you set in the CSS. But they are not meant to have no margins otherwise, why bother with a blockquote?

AlPe
07-31-2012, 12:51 PM
A blockquote (for example) is supposed to have margins all around it. The margins can be changed based on what you set in the CSS. But they are not meant to have no margins otherwise, why bother with a blockquote?

I am sorry, JSWolf, but you should really read my previous post (and follow the link to W3C):

http://www.mobileread.com/forums/showpost.php?p=2166697&postcount=13

and think about it.

You will see that a blockquote is not meant to "indent text", but rather to mark it as "a (block-level) citation".

Freeshadow
07-31-2012, 08:45 PM
Jon, the fact that you don't personally like it does NOT mean that it's wrong. You really need to stop thinking that anyone whose views differ from your own is "wrong". It is possible for people to have differing opinions on things, and many things (this included) are not "black and write".
We had the same situation with omnibus editions in the MR library, remember?
I am sorry, JSWolf, but you should really read my previous post (and follow the link to W3C):

http://www.mobileread.com/forums/showpost.php?p=2166697&postcount=13

and think about it.

You will see that a blockquote is not meant to "indent text", but rather to mark it as "a (block-level) citation".

Oh my even them doing it in a way other than Jon thinks is proper. *sigh* who's going to tell them to change it?

JS: Just as a reminder:

http://curiouspaul.com/you_are_here_galaxy.jpg]

JSWolf
07-31-2012, 10:58 PM
I am sorry, JSWolf, but you should really read my previous post (and follow the link to W3C):

http://www.mobileread.com/forums/showpost.php?p=2166697&postcount=13

and think about it.

You will see that a blockquote is not meant to "indent text", but rather to mark it as "a (block-level) citation".

I never said anything about indenting text. But a blockquote is supposed to have a margin around the block of text. I've plenty of eBooks use a simulated blockquote using CSS and they make it have far too much margin about the block. 5% on all margins is just asinine. That's what a lot of the publisher use.

JSWolf
07-31-2012, 11:02 PM
We had the same situation with omnibus editions in the MR library, remember?


Oh my even them doing it in a way other than Jon thinks is proper. *sigh* who's going to tell them to change it?

Why use a blockquote if it's not going to actually be a blockquote? A blockquote is meant to offset text by having a margin around block of text. By having no margins for a blockquote, you end up with it not actually being a blockquote. The amount of margin used is up to whomever. But there has to be a margin of enoug of a size to show the block of text is actually offset or it's not a proper blockquote.

HarryT
08-01-2012, 03:01 AM
Why use a blockquote if it's not going to actually be a blockquote? A blockquote is meant to offset text by having a margin around block of text. By having no margins for a blockquote, you end up with it not actually being a blockquote. The amount of margin used is up to whomever. But there has to be a margin of enoug of a size to show the block of text is actually offset or it's not a proper blockquote.

No, a blockquote is exactly what it says on the tin: an extended quotation. You CAN make it stand out from the rest of the text with margins, and that is the way that most browsers will display it by default, but it's not written in tablets of stone by a divine power that "thou shalt indent a blockquote". It's perfectly possible to make it stand out in some other way, such as using a different font, or displaying it in italics.

A blockquote is a semantic concept, not a visual one. Ask yourself this, for example: how would a text to speech program differentiate a blockquote from the surrounding text?

Jellby
08-01-2012, 03:10 AM
I never said anything about indenting text.

In this case, "indent" means margin (left margin, in particular). You are probably assuming it's only the first-line indent (or the text-indent property). From dictionary.com:

2. to set in or back from the margin, as the first line of a paragraph.

(note: "as the first line", not that it's only used for the first line)

Why use a blockquote if it's not going to actually be a blockquote? A blockquote is meant to offset text by having a margin around block of tex.

Not so. First, a blockquote could be marked up only for archival purporses, for automatic processing, for indexing, etc. without any special typesetting. Second, if it is desired to set a blockquote apart from the surrounding text, having wider margins (indent) is only one of the options (the default in most browsers), but not the only one. I have seen real printed books with blockquotes in a smaller font (and normal margins), or with blockquotes with only a small top and bottom margin, or with no difference at all. I could also imagine someone wanting blockquotes to have just a grey background, or a border, or in a script font...

A blockquote is a block-level quotation, nothing should be assumed about its formatting.

AlPe
08-01-2012, 03:34 AM
I never said anything about indenting text.

Ok, for the sake of clarity (although, as Jellby noted, "indent" does not refer to the first line only), let me amend the previous post:



I am sorry, JSWolf, but you should really read my previous post (and follow the link to W3C):

http://www.mobileread.com/forums/sho...7&postcount=13

and think about it.

You will see that a blockquote is not meant to "put bigger margins around some text", but rather to mark it as "a (block-level) citation".

Said that, we have been elaborating on the concept for the last 10 posts or so, supporting our reasoning with examples and logics and providing links to the W3C documents. If you want to think about the explanations we are offering you, good. Otherwise I can easily move on with you believing what you want on the point, but please do not claim to be on the right side.

JSWolf
08-01-2012, 07:50 AM
I'm sorry, but you are all plain wrong. You obviously have no idea the function of a blockquote. Read what I've put previously to know what a blockquote is.

HarryT
08-01-2012, 09:15 AM
Let's go straight to the horse's mouth, Jon, and see what "w3.org" has to tell us about blockquotes:

http://www.w3.org/TR/html401/struct/text.html#h-9.2.2

These two elements ([BLOCKQUOTE] and [Q]) designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks.


See that, Jon? A blockquote "designates quoted text". No more, no less.

It goes on to tell us:

The usage of BLOCKQUOTE to indent text is deprecated in favor of style sheets.

JSWolf
08-02-2012, 05:19 PM
Doesn't matter about that being deprecated. It still exists, it's still supported and it still works.