Different font for headings

[bremler]

Hi, I'd appreciate some help. I'm trying to use one font (georgia.tff) for the body and a different font (DroidSans-Bold.ttf) for the headings.

Here's my CSS:

p {margin-left:5%; margin-right:5%; margin-top:0;margin-bottom:0; padding:0;text-indent:1.1em;font-size:120%}
p.space{margin-left:5%; margin-right:5%; margin-top:2%;margin-bottom:0; padding:0;font-size:120%}
p.space1{margin-left:5%; margin-right:5%; margin-top:4%;margin-bottom:0; padding:0;font-size:120%}

div.ignore {margin-left:5%; margin-right:5%; margin-top:0;margin-bottom:0; padding:0;font-size:120%}

@font-face { font-family: "Georgia"; font-weight: normal; font-style: normal; src: url(res:///Data/fonts/georgia.ttf); }
@font-face { font-family: "Georgia"; font-weight: normal; font-style: italic; src: url(res:///Data/fonts/georgiai.ttf); }
@font-face { font-family: "Heading"; font-weight: normal; font-style: normal; src: url(res:///Data/fonts/DroidSans-Bold.ttf); }

body { font-family: "Georgia", serif; }

h2 {font-family: "Heading", serif; margin-left:5%; text-align: left; margin-bottom: 2cm; font-weight:bold}

div.sgc-1 {text-align: center}
div.sgc-3 {text-align: center;}
h1.sgc-2 {text-align: center;}
p.sgc-4 {font-style: italic}
p.sgc-1 {font-style: italic}
span.sgc-5 {letter-spacing:2px}



I save it to my Sony 505 and the Droid font overrides the Georgia, so that everything, heading and body included, comes out in Droid.

Would love some help, thanks

[charleski]

Originally Posted by bremler

@font-face { font-family: "Heading"; font-weight: normal; font-style: normal; src: url(res:///Data/fonts/DroidSans-Bold.ttf); }

body { font-family: "Georgia", serif; }

h2 {font-family: "Heading", serif; margin-left:5%; text-align: left; margin-bottom: 2cm; font-weight:bold}

Not sure if it's the cause, but I highlighted a problem in your font definitions. You're telling the renderer you want to use a bold weight for the 'Heading' font-family, but only defined a normal weight.

[bremler]

Thanks charleski, I solved it. Sigil had added some extra tags to my headings, so they looked something like this: <h2 heading_id>Chapter 1</h2>.

So I went through and deleted the heading_id to make it just <h2> and now both fonts show up where they should be :-)

[Valloric]

Originally Posted by bremler

Thanks charleski, I solved it. Sigil had added some extra tags to my headings, so they looked something like this: <h2 heading_id>Chapter 1</h2>.

So I went through and deleted the heading_id to make it just <h2> and now both fonts show up where they should be :-)

Now your TOC probably doesn't work. IDs are added to headings so that they can be referenced from the NCX file. Removing the ID makes the reference invalid if you removed it from outside Sigil. If you removed it inside Sigil, in the Code View, a new ID was added to the heading on export.

And removing the ID should not have solved your CSS issue with the CSS code you posted. It was probably something else.

[bremler]

Hi Valloric, no, TOC works ok. I edited the tags within Sigil, knowing that Sigil would recreate them. And it did, but fonts remain intact.