07-25-2012, 05:12 AM | #1 |
Junior Member
Posts: 2
Karma: 10
Join Date: Jul 2012
Device: Mobipocket; Kindle; Calibre; ADE
|
Another problem embedding font
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 "/> |
07-25-2012, 05:34 AM | #2 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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. Last edited by Toxaris; 07-25-2012 at 05:39 AM. |
Advert | |
|
07-25-2012, 05:44 AM | #3 |
Member
Posts: 10
Karma: 10
Join Date: Jul 2012
Location: Chennai
Device: ipad, Kindle, Nook, kobo
|
CSS path
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); |
07-25-2012, 07:08 AM | #4 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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.
|
07-25-2012, 07:21 AM | #5 | |
Connoisseur
Posts: 51
Karma: 29994
Join Date: Nov 2011
Location: Manila, Philippines
Device: iPad 2 & Nexus 7
|
Quote:
@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). Last edited by Jellby; 07-25-2012 at 07:34 AM. |
|
Advert | |
|
07-25-2012, 10:28 AM | #6 |
Junior Member
Posts: 2
Karma: 10
Join Date: Jul 2012
Device: Mobipocket; Kindle; Calibre; ADE
|
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; } |
07-26-2012, 04:49 AM | #7 |
Member
Posts: 10
Karma: 10
Join Date: Jul 2012
Location: Chennai
Device: ipad, Kindle, Nook, kobo
|
Not affect in ADE view.
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. |
07-27-2012, 04:33 PM | #8 |
Resident Curmudgeon
Posts: 74,703
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
Code:
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; } |
07-28-2012, 05:42 AM | #9 |
frumious Bandersnatch
Posts: 7,517
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
It's OK if later rules add margins where desired.
|
07-28-2012, 12:13 PM | #10 |
Resident Curmudgeon
Posts: 74,703
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
07-28-2012, 01:40 PM | #11 | |
Digital Amanuensis
Posts: 727
Karma: 1446357
Join Date: Dec 2011
Location: Turin, Italy
Device: Several eReaders and tablets
|
Quote:
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? |
|
07-28-2012, 04:02 PM | #12 |
Resident Curmudgeon
Posts: 74,703
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
07-28-2012, 04:07 PM | #13 | |
Digital Amanuensis
Posts: 727
Karma: 1446357
Join Date: Dec 2011
Location: Turin, Italy
Device: Several eReaders and tablets
|
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: Quote:
Last edited by AlPe; 07-28-2012 at 04:14 PM. |
|
07-29-2012, 04:03 AM | #14 |
frumious Bandersnatch
Posts: 7,517
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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". |
07-31-2012, 10:06 AM | #15 |
Resident Curmudgeon
Posts: 74,703
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Technically it's not messy. But usage wise it's a mess.
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Problem embedding font for Sanskrit | northstar7 | ePub | 11 | 07-18-2012 02:47 AM |
InDesign CS5.5 font embedding problem | ralphiedee | ePub | 7 | 05-16-2012 11:55 AM |
Problem embedding font into an ePub | mvo | ePub | 16 | 01-03-2012 07:10 PM |
Do I need a font license if all I'm doing is referring to the font (not embedding)? | Stodder | Workshop | 21 | 04-21-2011 04:19 AM |
Another font embedding problem | b.tarde | EPUBReader | 12 | 03-11-2010 01:40 PM |