Embedding fonts in ePub using Sigil

[yaip]

This is all so confusing and frustrating. I've Googled and found tons of answers. However, not the right one.

I am not a Sigil expert. I have an ePub book that has Mangal fonts to show Hindi. It shows correctly on some devices and ???? on other. I read that if I embed those fonts in my ePub file, it will show correctly on ALL devices. If I am right, all I want to do is add Mangal fonts to my fonts folder (or am I totally wrong?), save my ePub file.

Is this possible? Can anyone give me a step-by-step without sending me to a link? Please.

[meme]

Try the Sigil User Guide section for embedding fonts. But not all devices support all fonts.

[Danger]

Note this is a simplified step by step. Once you have mastered this, then some other things are possible but you will need to make sure the basics are working first. Substitute your font for the one listed in this example.

It's a good idea to save after each step you complete because Sigil does crash every once in awhile.

1) Open epub book in Sigil.

2) RIGHT mouse click on Fonts folder in right hand column, Select "Add Existing Files..."

3) Find your font, in this case: Hindi.ttf, select it, click OPEN.

3b) SAVE...

4) Edit stylesheet.css, my styles are:

p {
font-family: "Hindi";
font-size: 1.00em;
text-align: justify;
}

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

4b) SAVE

Additionals:

The p { ... } can be changed to a class if need be, I prefer to keep my epubs very bare bones and use classes to override my base <p> where only required.

Bold / Italics can be added by:

i, em {
font-family: "Hindi_italics";
}

b {
font-family: "Hindi_bold";
}

@font-face {
font-family: "Hindi_bold";
font-weight: bold;
font-style: normal;
src: url(../Fonts/Hindi-Bold.ttf);
}

@font-face {
font-family: "Hindi_italics";
font-weight: normal;
font-style: italic;
src: url(../Fonts/Hindi-Italic.ttf);
}

[mrmikel]

BTW, just make sure in your experimenting that you use public domain fonts. Some fonts are OK on your computer, but can not be embedded. This can cause mysterious not working when you have done everything fine otherwise, I understand.

[MrB]

Many thanks, Danger, that worked fine for what I've been looking for.

[Toxaris]

Be aware that the @font-face must be the first lines in the CSS.

[ghostyjack]

Originally Posted by Toxaris

Be aware that the @font-face must be the first lines in the CSS.

Really?

That's odd, as for all the epubs I've made the @font-face entries are put at the bottom and some far they have worked.

[Toxaris]

I will have too look it up, but I definitely remember that. Can't remember why though.

[Jellby]

Maybe you are confusing it with @import, which must be the first thing if I remember correctly.

Or maybe there's a bug of some reader...

[Toxaris]

That might very well be true Jellby. That sounds like something I might confuse in my head. In the beginning I used an additional stylesheets for the @font-face and used @import for that. It might very well be that this merged in my head.

[Jorge Junior]

Hi, Toxaris!
I'm trying to change the default font too, but it's not working.
I want to use two different fonts for titles and text. The text font is working fine, but the title font isn't... although it works in Sigil.
The only thing I could do was to change its color with "color:#FFC800".
What could be wrong in my CSS?

@font-face {
font-family: Book Antiqua;
font-style: normal;
font-weight: normal;
src:url("../Fonts/BKANT.TTF");
}
@font-face {
font-family: Aphrodite Pro;
font-style: normal;
font-weight: bold;
src:url("../Fonts/Aphrodite Pro.otf");
}
p+p
{
font-family: Book Antiqua;
text-indent:1.5em;
text-align: justify;
font-size: 1.10em;
}
.title
{
font-family: Aphrodite Pro;
color:#FFC800;
margin-top:0em;
margin-bottom:.65em;
page-break-after:avoid;
font-size: 3.8em;
text-align: center;
text-indent:0em;
}

[Toxaris]

Ditch the spaces in the names.

[Jellby]

Or wrap them in quotes.

[Jorge Junior]

Thank you, guys!
Wrapping them in quotes did the trick.

[AIR-WIZZ]

My first time working with embedding fonts but I've already made 4 successful ePubs for clients.
@font-face {
font-family: "Book Antiqua";
font-weight: normal;
font-style: normal;
src: url('../Fonts/BKANT.TTF');
}
@font-face {
font-family: "Book Antiqua";
font-weight: bold;
font-style: normal;
src: url('../Fonts/ANTQUAB.TTF');
}
@font-face {
font-family: "Book Antiqua";
font-weight: normal;
font-style: italic;
src: url('../Fonts/ANTQUAI.TTF');
}
@font-face {
font-family: "Courier New";
font-weight: normal;
font-style: normal;
src: url('../Fonts/cour.ttf');
}
body {
font-family: "Book Antiqua", serif;
margin: 1em 1em 1em 1em;
background: #FFFF99;
}
.italics {
font-style: italic;
}
My problem is italics, bold, etc don't respond. I use classes in spans to implement italics, bold, etc. but <i></i> doesn't allow italics either.
E.G: ...<span class="italics">The Seth Material</span>...
All the text is standard.
Any ideas?