Another problem embedding font

[Alabala]

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]

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]

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]

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]

Originally Posted by Alabala

@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]

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]

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]

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]

It's OK if later rules add margins where desired.

[JSWolf]

Originally Posted by Jellby

It's OK if later rules add margins where desired.

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

[AlPe]

Originally Posted by JSWolf

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]

Originally Posted by AlPe

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]

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-block...kquote-element.

[Jellby]

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]

Technically it's not messy. But usage wise it's a mess.