05-20-2011, 03:50 PM | #1 |
Jr. - Junior Member
Posts: 586
Karma: 2000358
Join Date: Aug 2010
Location: Alabama
Device: Archos, Asus, HP, Lenovo, Nexus and Samsung tablets in 7,8 and 10"
|
Just don't understand embedded fonts
Rather than verbally explain my confusion, I've uploaded an epub file that I use to test results of coding changes. In it I have defined four font faces: ArialN, LiberationMono, LiberationSans and LiberationSerif each with bold, italic and bold-italic.
In the "body" I have defined "ArialN" as the font family. Every thing works as expected including bolding and italicization. If I change the font family the font changes but the bolding and italicization does not follow. Can anybody tell me what I'm missing? Please read my next post and disregard the attachment below. Regards - John P.S. Sorry, I didn't know the file was this big. Should have zipped it. Last edited by Jabby; 05-20-2011 at 09:25 PM. Reason: Correcting error |
05-20-2011, 04:26 PM | #2 |
Resident Curmudgeon
Posts: 73,974
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
@font-face {
font-family: "ArialN"; font-style: normal; font-weight: normal; src:url(../Fonts/ArialN-Regular.ttf); } @font-face { font-family: "ArialN"; font-style: normal; font-weight: bold; src:url(../Fonts/ArialN-Bold.ttf); } @font-face { font-family: "ArialN"; font-style: italic; font-weight: bold; src:url(../Fonts/ArialN-BoldItalic.ttf); } @font-face { font-family: "ArialN"; font-style: italic; font-weight: normal; src:url(../Fonts/ArialN-Italic.ttf); } That's what works. |
05-20-2011, 09:23 PM | #3 |
Jr. - Junior Member
Posts: 586
Karma: 2000358
Join Date: Aug 2010
Location: Alabama
Device: Archos, Asus, HP, Lenovo, Nexus and Samsung tablets in 7,8 and 10"
|
Sorry I wasn't clear with my question. I'll try again.
I am uploading a new file with four chapters each with the same text and same exact same coding which is a mixture of bold and italic. The only difference between these chapters is that each uses a different font. If you look at chapter 1 you will see the font style with the bolding and italicization. In all the other chapters you can see the font style change but not the bolding and italicization. My question is why? It makes no sense to me and I am hoping that someone can enlighten me. Regards - John |
05-20-2011, 11:31 PM | #4 | |
What the Dog Saw
Posts: 311
Karma: 981684
Join Date: Jul 2008
Location: Dunn Loring
Device: Sony PRS-650, Surface3
|
Quote:
|
|
05-21-2011, 09:55 AM | #5 | |
Jr. - Junior Member
Posts: 586
Karma: 2000358
Join Date: Aug 2010
Location: Alabama
Device: Archos, Asus, HP, Lenovo, Nexus and Samsung tablets in 7,8 and 10"
|
Quote:
I downloaded the Sony viewer and everything worked as you said. I suppose that means that the file is OK (95%?). One thing that I just noticed. The calibre viewer and the Sigil viewer fail in exactly the same way. Makes me think that the Calibre viewer was the starting point for the Sigil viewer. Regards - John Last edited by Jabby; 05-21-2011 at 10:02 AM. |
|
05-21-2011, 10:20 AM | #6 | |
Well trained by Cats
Posts: 29,801
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
I was working on a section number (only) page: Sigil renders a ADE can't center workaround too far Right. Calibre, too far Right ADE (on the reader), close to what I wanted ADE on the PC, Perfect EPUBReader (firefox), close |
|
05-21-2011, 12:36 PM | #7 |
eBook FANatic
Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
I have been experienting trying to learn how to put fonts into Sigil with little luck. I obviously have no understanding of the process.
The following is at the head of the CSS. Code:
@font-face { font-family: "Garfeld"; font-style: normal; font-weight: bold; src:url(../Fonts/"GarfeldAntique Bold.ttf"); } Code:
p, div { margin-top: 0; margin-bottom: .5em; margin-right: 0; margin-left: 0; text-indent: 1.5em; text-stye: bold; font-family:Garfeld,"Times New Roman", Times, serif; } Code:
<item href="Fonts/GarfeldAntique%20Bold.ttf" id="GarfeldAntiqueBold.ttf" media-type="application/x-font-ttf" /> All this has no effect. Can someone point out mt errors? Last edited by crutledge; 05-21-2011 at 12:39 PM. |
05-21-2011, 01:39 PM | #8 | |
Jr. - Junior Member
Posts: 586
Karma: 2000358
Join Date: Aug 2010
Location: Alabama
Device: Archos, Asus, HP, Lenovo, Nexus and Samsung tablets in 7,8 and 10"
|
Quote:
I had forgotten I even had the PC version of ADE, I use it so infrequently. It read my file perfectly as far as the fonts were concerned. It goofed me up when ADE wouldn't increase/decrease the font size because I had defined the font size as 16pt in the CSS. I had to go back and set it as "em's" to get it to work. As I said earlier - so much for standards. Regards - John |
|
05-21-2011, 01:41 PM | #9 |
Resident Curmudgeon
Posts: 73,974
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
But having pt is correct as far as keeping the font at a fixed size. em is a variable size and can change as needed.
|
05-21-2011, 02:04 PM | #10 | |
Jr. - Junior Member
Posts: 586
Karma: 2000358
Join Date: Aug 2010
Location: Alabama
Device: Archos, Asus, HP, Lenovo, Nexus and Samsung tablets in 7,8 and 10"
|
Quote:
Couple of suggestions: Replace this: @font-face { font-family: "Garfeld"; font-style: normal; font-weight: bold; src:url(../Fonts/"GarfeldAntique Bold.ttf"); With @font-face { font-family: "GarfeldAntique"; font-style: normal; font-weight: bold; src:url(../Fonts/GarfeldAntique Bold.ttf); Replace this line: font-family:Garfeld,"Times New Roman", With font-family:"GarfeldAntique"; I think this may work. Let me know so we can both learn. Regards - John P.S. The @font-face statement is not required to be at the top of the style sheet as far as I can tell. |
|
05-21-2011, 04:30 PM | #11 |
eBook FANatic
Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
Tried what you said, but something is still wrong!!!
See attached ePub I've been experimenting with. Perhaps someone can make it work and send it to me. I'd surely like to see a pony. Maybe an ebook that works. I'm probably making it haeder than it truly is. |
05-21-2011, 07:27 PM | #12 | |
Jr. - Junior Member
Posts: 586
Karma: 2000358
Join Date: Aug 2010
Location: Alabama
Device: Archos, Asus, HP, Lenovo, Nexus and Samsung tablets in 7,8 and 10"
|
Quote:
I think that your font file may be faulty, so..... I'm not sure just what you are trying to do. If you are wanting a different font for the text, here are a couple of examples. I selected a serif and a sans serif font. Remember - epubs look different depending on the reader. I have added font files, @font face statements and altered your "h1...h6" and the "p" definitions. I think the best way to control fonts is to add the entire font group (regular, bold italic and bolditalic). This way gives you more options in the books appearance. Regards - John |
|
05-21-2011, 07:31 PM | #13 |
Resident Curmudgeon
Posts: 73,974
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Whatever it is you did, the base font is microscopic and unable to be sized so it can be read.
|
05-21-2011, 10:37 PM | #14 | |
Jr. - Junior Member
Posts: 586
Karma: 2000358
Join Date: Aug 2010
Location: Alabama
Device: Archos, Asus, HP, Lenovo, Nexus and Samsung tablets in 7,8 and 10"
|
Quote:
What reader were you using? Anybody else having this problem? Regards - John |
|
05-22-2011, 04:54 AM | #15 |
Addict
Posts: 206
Karma: 547516
Join Date: Mar 2008
Location: Berlin, Germany
Device: KObo Clara, Kobo Aura, PRS-T1, PB602, CyBook Gen3
|
@crutledge: I looked at your file in the Desktop ADE and I see the microscopic font size, too.
I took also a closer look at your CSS file and there are two things that ADE does not like. 1) Code:
a: {
color: black;
}
Code:
a { color: black; } Code:
p, div {
margin-top: 0;
margin-bottom: .5em;
margin-right: 0;
margin-left: 0;
text-indent: 1.5em;
font-size: 2 em;
font-family:GarfeldAntique,"Times New Roman", Times, serif;
}
After correcting these, your font does display in ADE. By the way, why do you want the font size of the text to be bigger than the font size of the title? (text: 200% = 2em; h3.chapter: 150% = 1.5em) Last edited by Sunlite; 05-22-2011 at 04:55 AM. Reason: fixed spelling mistakes |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Embedded fonts? | Greenmantle | Kobo Reader | 66 | 07-27-2011 08:20 PM |
Problem with embedded fonts | James_Wilde | ePub | 25 | 09-24-2010 04:07 PM |
Embedded fonts, Calibre, and choice of fonts | AlexBell | ePub | 8 | 05-30-2010 06:00 AM |
iPad Embedded Fonts | JSWolf | Apple Devices | 24 | 04-26-2010 02:41 PM |
PRS-500 Finally understand how to put user fonts on Sony Reader! | db100 | Sony Reader Dev Corner | 5 | 01-19-2007 01:24 PM |