Fonts - Help

Gallips · 09-04-2013, 06:14 PM

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;

I've linked the stylesheet but still nothing. I still have Arial as font.

What am I doing wrong? any ideas?

Gallips · 09-04-2013, 06:20 PM

SO, I guess I've found the problem =S

I've added this and solved all my problems

Quote:

p {
font-family: Georgia, serif;
font-weight: normal;
text-indent: 1em;
text-align: justify;
line-height: 120%;
margin-bottom: .5em;
margin-left: 0.5em;
margin: 0;
padding: 0;
}

DiapDealer · 09-04-2013, 06:41 PM

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.

RbnJrg · 09-04-2013, 08:01 PM

Quote:

Originally Posted by Gallips

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;

I've linked the stylesheet but still nothing. I still have Arial as font.

What am I doing wrong? any ideas?

Hi Gallips;

You defined the fonts well but the problems are here:

Code:

h1 { 
    font-family: 'Garamond', serif;
}

h3 { 
    font-family: 'Garamond', serif;
}

You only defined the font-family but also you have to defined font-style and font-weight. Since all fonts definitions have the same name ("Garamond") Sigil doesn't know what font to aply. So, you should use:

Quote:

h1 {
font-family: 'Garamond', serif;
font-weight: bold;
font-style: normal;
}

h3 {
font-family: 'Garamond', serif;
font-weight: bold;
font-style: normal;
}

or, if you wish italics:

Quote:

h1 {
font-family: 'Garamond', serif;
font-weight: bold;
font-style: italic;
}

h3 {
font-family: 'Garamond', serif;
font-weight: bold;
font-style: italic;
}

Regards
Rubén

DiapDealer · 09-04-2013, 08:16 PM

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).

GrannyGrump · 09-05-2013, 02:16 AM

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.

Gallips · 09-06-2013, 06:23 AM

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:

Originally Posted by DiapDealer

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.

I did just what you said and worked great, both in ADE and in my Kobo Touch. Thank you so much =D

Quote:

Originally Posted by RbnJrg

Hi Gallips;

You defined the fonts well but the problems are here:

Code:

h1 { 
    font-family: 'Garamond', serif;
}

h3 { 
    font-family: 'Garamond', serif;
}

You only defined the font-family but also you have to defined font-style and font-weight. Since all fonts definitions have the same name ("Garamond") Sigil doesn't know what font to aply. So, you should use:

or, if you wish italics:

Regards
Rubén

I did that. Thanks. It worked just fine.

09-04-2013, 06:14 PM	#1
Gallips 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; I've linked the stylesheet but still nothing. I still have Arial as font. What am I doing wrong? any ideas?

09-04-2013, 08:16 PM	#5
DiapDealer Grand Sorcerer Posts: 27,547 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
GrannyGrump 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.

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

09-04-2013, 06:41 PM	#3
DiapDealer Grand Sorcerer Posts: 27,547 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.

Advert

Advert