09-04-2013, 06:14 PM | #1 |
Member
Posts: 17
Karma: 10
Join Date: Aug 2013
Device: Kobo Touch (N905)
|
Fonts - Help
I got sick of epubs with problems and bad looks, so I've decided to try Sigil out and tweaks the epubs to my liking.
It was a bit complicated to learn, I still do not understand all, but has been fun. Until I decided to change fonts.... Honestely, I have no idea what's the problem. The font I plan to use is simple, Georgia, but still doesn't apply to the epub. So far I have something like this: Code:
@font-face { font-family: 'Garamond'; font-weight: normal; font-style: normal; src: url('../Fonts/Garamond.ttf'); } @font-face { font-family: 'Garamond'; font-weight: bold; font-style: normal; src: url('../Fonts/Garamond Bold.ttf'); } @font-face { font-family: 'Garamond'; font-weight: normal; font-style: italic; src: url('../Fonts/Garamond Italic.ttf'); } h1 { font-family: 'Garamond', serif; } h3 { font-family: 'Garamond', serif; What am I doing wrong? any ideas? |
09-04-2013, 06:20 PM | #2 | |
Member
Posts: 17
Karma: 10
Join Date: Aug 2013
Device: Kobo Touch (N905)
|
SO, I guess I've found the problem =S
I've added this and solved all my problems Quote:
|
|
09-04-2013, 06:41 PM | #3 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
You shouldn't have had to assign the font-family to all p elements in order to get it to work for just the h[123] elements. It looks like you did everything right (so long as you actually added the ttf font files to the epub), so just remember that you don't really want to use Sigil's viewer as the sole means of verifying that your embedded fonts are "working" or not. Use ADE or an actual device to know for sure.
P.S. Not sure why adding the Georgia font-family to your paragraph style would make your Garamond fonts start working. |
09-04-2013, 08:01 PM | #4 | |||
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
You defined the fonts well but the problems are here: Code:
h1 { font-family: 'Garamond', serif; } h3 { font-family: 'Garamond', serif; } Quote:
Quote:
Rubén |
|||
09-04-2013, 08:16 PM | #5 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Actually, you shouldn't have to define the font-weight or -style unless you specifically want them to be something other than normal/normal. As long as the font-family is indicated, normal/normal should be implied unless you specify otherwise. That's the way it always works for me anyway.
Something else to keep in mind. I tend NOT to use font filenames that will result in using spaces in the src:url() property. Even if it's quoted, I'm not sure that filenames with spaces are are appropriate there--font-family name, sure (as long as it's quoted everywhere), but I don't know about src:url. The word 'url' tells me don't do it (or use the proper escaped url). Last edited by DiapDealer; 09-04-2013 at 08:43 PM. |
09-05-2013, 02:16 AM | #6 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Something else that might be useful ---
When embedding fonts, I assign a generic name in the @fontface rule, instead of using the actual font name, and use that name for the CSS styles. That way, if I decide to use a different embedded font, I can use the same generic name for the @fontface, and I don't have to go back through all the CSS and change all those names. For example: Code:
@font-face { font-family: smcaps; font-weight: normal; font-style: normal; src: url("../Fonts/EBGaramond12-SC.ttf") format("truetype"); } @font-face { font-family: blackletter; src: url("../Fonts/GermaniaOne.ttf") format("truetype"); } .smcaps { font-family: smcaps; } .headline { font-family: blackletter, serif; font-size: 135%; } Now if I wanted to change my smallcaps font to Charis, I only have to change the @fontface, not the rest of the CSS. Last edited by GrannyGrump; 09-05-2013 at 02:26 AM. |
09-06-2013, 06:23 AM | #7 | ||
Member
Posts: 17
Karma: 10
Join Date: Aug 2013
Device: Kobo Touch (N905)
|
Hi and thanks for the prompt replies.
Since I want Georgia or Garamond font tipes and because Sigil and my e-reader (kobo touch) recognizes them, I removed the font face. Now I only have them applied on body, P, H1, H2 and H3, Like this: Code:
body { font-size: 1em; line-height: 1.33em; font-family: 'Georgia', serif; } p { padding: 0; margin: 0; text-align: justify; h1 { font-size: 1.5em; line-height: 1.33em; text-align: center; text-align: center; text-transform: uppercase; font-weight: normal; letter-spacing: 4px; } h2 { text-align: center; font-size: 1.33em; line-height: 1.2em; text-transform: uppercase; font-weight: bold; letter-spacing: 3px; } h3 { text-align: center; font-size: 1.10em; line-height: 1.2em; text-transform: uppercase; font-weight: bold; letter-spacing: 3px; } Quote:
Quote:
|
||
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
How to add alternate fonts without replacing system fonts.(this time this is a guide) | techiemonkey | Kindle Developer's Corner | 17 | 09-12-2012 04:55 PM |
An Observation on Fonts - Improving readability by using *bold* versions of fonts | nesler | General Discussions | 12 | 06-24-2012 12:33 PM |
need the fonts in /usr/java/lib/fonts of kindle touch5.0.0 | hanpal | Kindle Developer's Corner | 1 | 02-20-2012 10:40 AM |
Troubleshooting need the fonts in /usr/java/lib/fonts of kindle touch5.0.0 | hanpal | Amazon Kindle | 0 | 02-20-2012 08:51 AM |
Touch Fonts question (special characters in stock and custom fonts) | levil | Kobo Reader | 20 | 09-23-2011 01:51 PM |