I want more than more than one @fontface

[p3aul]

I'm just discovering that Sigil is the best tool for embedding fonts, but I have a problem. I can't seem to embed more than one font and I would like to have one font for chapter headings and one font for text. here is how I'm doing it. In the stylesheet.css I use this:

@font-face
{
font-family: "Davida Bd BT";
src: url("Davida.ttf"); 
}
@font-face
{
font-family: "High Tower Text";
 src: url("HTOWERI.TTF"); 
}

In .calibre4 and .calibre6 I use font-family: Davida etc...
The Davida is for chapter headings and it shows up fine. The Hitower is for the body and it doesn't show up. I had premonition that something was wrong because the color of the first @fontface is blue and the second is red. Sure enough when I examined one of the html files the chapter headings were correct but the body isn't. Now I read somewhere that IE does not allow a second @fontface(less power to them!) but it shouldn't matter since this is for an epub and I use FF on my linux machine anyway. I also use Calibre of course.

Could someone help me get this straight?
Thanks,
Paul

[ghostyjack]

You can have more than one, I've managed (using Sigil) to embed over 6 fonts and they all work.

Well one thing I see is wrong is the location specified, you haven't specified where the font files are.

If you've used Sigil, then the location needs to be:

src: url("../Fonts/font.ttf");

So just put the extra bit in front of it and this (hopefully) should work.

[theducks]

@P3aul

The location error has been pointed out

There are 2(or more) places that entries for every font face used must be made.

The first is the @font

@font-face {
font-family: "Charis";
font-style: normal;
font-weight: normal;
src:url(../Fonts/CharisSILR.ttf);
}

The rest are in the individual styles where THAT face is to be used.

 
font-family: "Charis", serif;
font-style: normal;
font-weight: normal;

Note that you normally need a separate @font (and font file) for each combination of weight and style you will use

[p3aul]

OkWell It's true that sigil adds a "Fonts" folder that Calibre does not. and that's fine. Before the epub is saved, fonts are added, and viewed by Calibre's viewer though, you *can* view your changes in sigil just by going to any html file and viewing that. you get the code(on the bottom) and the actual text on the top. so I did not need to actually add the font to the folder in order to view the changes. I did go ahead and add the fonts to the font folder anyway as a matter of course. Sigil adds the fonts folder, you don't really need it. But you sure better put the fonts folder in the path(as I didn't) You can do the whole thing by hand by first renaming the epub extension to zip. Extract the files, make your changes to stylesheet.css, and zip up your fonts all in the same directory. Sigil just makes it easier.

Problem: sometimes it works, sometimes it doesn't. All I'm doing is replacing the font name and the font file name. all else remains the same. With some it works, with some it doesn't. Some fonts are TTF and others are otf. Whether they are ttf or otf doesn't seem to make a difference. It does seem though that capitalisation makes a difference. Some font file names are in all caps.

I'm pulling my hair out over this! My next step I guess will be to embed two fonts by hand, that is using one or two that Sigil chokes on and see if there is a difference.

TheDucks: yes I know. I put the @font-face declarations at the top of the css file and I put the name and other particulars in the class name I want the change in ie .calibre5 {font-family: "myfont" ; font-style: italic }

Thanks,
Paul

[DiapDealer]

Originally Posted by p3aul

OkWell It's true that sigil adds a "Fonts" folder that Calibre does not. and that's fine. Before the epub is saved, fonts are added, and viewed by Calibre's viewer though, you *can* view your changes in sigil just by going to any html file and viewing that. you get the code(on the bottom) and the actual text on the top. so I did not need to actually add the font to the folder in order to view the changes. I did go ahead and add the fonts to the font folder anyway as a matter of course. Sigil adds the fonts folder, you don't really need it. But you sure better put the fonts folder in the path(as I didn't) You can do the whole thing by hand by first renaming the epub extension to zip. Extract the files, make your changes to stylesheet.css, and zip up your fonts all in the same directory. Sigil just makes it easier.

Problem: sometimes it works, sometimes it doesn't. All I'm doing is replacing the font name and the font file name. all else remains the same. With some it works, with some it doesn't. Some fonts are TTF and others are otf. Whether they are ttf or otf doesn't seem to make a difference. It does seem though that capitalisation makes a difference. Some font file names are in all caps.

I'm pulling my hair out over this! My next step I guess will be to embed two fonts by hand, that is using one or two that Sigil chokes on and see if there is a difference.

TheDucks: yes I know. I put the @font-face declarations at the top of the css file and I put the name and other particulars in the class name I want the change in ie .calibre5 {font-family: "myfont" ; font-style: italic }

Thanks,
Paul

Don't use Sigil's Book view to test if your embedded fonts are working properly.

[Doitsu]

Originally Posted by DiapDealer

Don't use Sigil's Book view to test if your embedded fonts are working properly.

I totally agree with DiapDealer's suggestion, because there's a font bug in the Qt framework that Sigil uses. See this thread for more information.

[DaleDe]

Originally Posted by p3aul

Problem: sometimes it works, sometimes it doesn't. All I'm doing is replacing the font name and the font file name. all else remains the same. With some it works, with some it doesn't. Some fonts are TTF and others are otf. Whether they are ttf or otf doesn't seem to make a difference. It does seem though that capitalisation makes a difference. Some font file names are in all caps.

All filenames in Sigil and any other Unix based system are case specific. This is a hard and fast rule. You must match case.

Dale

[Hitch]

Originally Posted by DaleDe

All filenames in Sigil and any other Unix based system are case specific. This is a hard and fast rule. You must match case.

Dale

And are abso-freaking-lutely hard and fast rules for every single retailer out there. You screw up your cases for filenames--whether it be fonts, images, text, html, you-name-it, and your book implodes. It's a guaranteed kablammo on Apple, and Nook's not far behind.

And, yes, it's true, you don't "have to" have a separate fonts folder, but IME, which is not insignificant, having the text in one folder, images in another, styles and fonts in their own makes troubleshooting a lot simpler. Plus, it helps newbs find their stuff when everything goes to hell, which is remarkably often.

As you've already been told, don't use Split View to try to troubleshoot your issues or "test" to see if your edits work. Save the file with a versioning reference and pop it open with ADE, or sideload it in iBooks or Nook or whatever you're using to test. No offense to Valloric or user_none, but SV is kind of a murky bit, anyway.

HTH,
Hitch

[p3aul]

I think my problems were just co-piole trouble. Everything seems to be working now. But yes, I can preview my font in the latest version of Sigil with no trouble. As long as the font is installed on my computer, I don't even have to have it in the epub. That works nicely when I'm just experimenting. I have noticed that even when everything is OK, If I validate I get these two errors:

The <language> element is missing
element 'svg' is not allowed for content model '(p|h1|h2|h3|h4|h5|h6|div|ul|ol|dl|pre|hr|blockquote|address|fieldset|table|switch|form|noscript|ins|del|script)'

I think the best validation is "Does it Work?"

[theducks]

Originally Posted by p3aul

I think my problems were just co-piole trouble. Everything seems to be working now. But yes, I can preview my font in the latest version of Sigil with no trouble. As long as the font is installed on my computer, I don't even have to have it in the epub. That works nicely when I'm just experimenting. I have noticed that even when everything is OK, If I validate I get these two errors:

The <language> element is missing
element 'svg' is not allowed for content model '(p|h1|h2|h3|h4|h5|h6|div|ul|ol|dl|pre|hr|blockquote|address|fieldset|table|switch|form|noscript|ins|del|script)'

I think the best validation is "Does it Work?"

No. It works on YOUR configuration.
Validation says it meets a Standard (that you will probably warp to make it work on other devices)

Yore errors.
Tap F8, then Save (language gets set automagically)

Wrap the <svg... in <div> tags