Embedded fonts & italics

[Psymon]

Hey folks! Been quite a while since I did any ebooking, but this past week I thought I'd have a little fun with one, and ran into an odd issue.

I wanted to embed this font into my book...

http://www.1001fonts.com/minya-nouvelle-font.html

...and it's nice that it comes with bold and italic versions, and naturally I want those to be used wherever applicable. And so I embedded the regular, bold and italic versions of the fonts in my CSS...

@font-face {
    font-family: "minya-reg";
    font-weight: normal;
    font-style: normal;
    src: url("../Fonts/minya-reg.ttf") format("truetype");
    -webkit-hyphens:none;
    -epub-hyphens:none;
    -moz-hyphens:none;
    hyphens:none;
    -moz-font-feature-settings: "hist=1, liga=1, dlig=1";
    -ms-font-feature-settings: "hist", "liga", "dlig";
    -webkit-font-feature-settings: "hist", "liga", "dlig";
    -o-font-feature-settings: "hist", "liga", "dlig";
    font-feature-settings: "hist", "liga", "dlig";
}

@font-face {
    font-family: "minya-bd";
    font-weight: normal;
    font-style: normal;
    src: url("../Fonts/minya-bd.ttf") format("truetype");
    -webkit-hyphens:none;
    -epub-hyphens:none;
    -moz-hyphens:none;
    hyphens:none;
    -moz-font-feature-settings: "hist=1, liga=1, dlig=1";
    -ms-font-feature-settings: "hist", "liga", "dlig";
    -webkit-font-feature-settings: "hist", "liga", "dlig";
    -o-font-feature-settings: "hist", "liga", "dlig";
    font-feature-settings: "hist", "liga", "dlig";
}

@font-face {
    font-family: "minya-it";
    font-weight: normal;
    font-style: normal;
    src: url("../Fonts/minya-it.ttf") format("truetype");
    -webkit-hyphens:none;
    -epub-hyphens:none;
    -moz-hyphens:none;
    hyphens:none;
    -moz-font-feature-settings: "hist=1, liga=1, dlig=1";
    -ms-font-feature-settings: "hist", "liga", "dlig";
    -webkit-font-feature-settings: "hist", "liga", "dlig";
    -o-font-feature-settings: "hist", "liga", "dlig";
    font-feature-settings: "hist", "liga", "dlig";

...and then specified the reg version as my base font..

html>body {
	font-family: minya-reg, 'Times New Roman', Times, serif;
	font-size: 124%;
}

body {
	font-family: minya-reg, 'Times New Roman', Times, serif;
	font-size: 100%;
	line-height: 138%;
}

...and then specified that when <b> or <i> were used, that the appropriate font would be used, too...

b {
	font-weight: bold;
	font-family: "minya-bd";}

i {
	font-style: italic;
	font-family: "minya-it";}
}

While I'm working on the book in Sigil, everything seems just fine (as far as I can tell), but when I open it up in ADE, for some reason the italic font doesn't want to load -- although the bold one does just fine -- and so anything in italics comes out instead like Times New Roman (or something).

I've attached here a little test file I made, if you want to take a look at it in ADE or whatever and "see" the problem.

Thanks in advance, once again!

[Toxaris]

Why don't you specify the italic and bold version with the same font-family name and adjust the font-style and font-weight to correspond with the actual font? That way the reader should pick the right font anyway. So, like this:

@font-face {
    font-family: "minya";
    font-weight: normal;
    font-style: normal;
    src: url("../Fonts/minya-reg.ttf");
    -webkit-hyphens:none;
    -epub-hyphens:none;
    -moz-hyphens:none;
    hyphens:none;
    -moz-font-feature-settings: "hist=1, liga=1, dlig=1";
    -ms-font-feature-settings: "hist", "liga", "dlig";
    -webkit-font-feature-settings: "hist", "liga", "dlig";
    -o-font-feature-settings: "hist", "liga", "dlig";
    font-feature-settings: "hist", "liga", "dlig";
}

@font-face {
    font-family: "minya";
    font-weight: bold;
    font-style: normal;
    src: url("../Fonts/minya-bd.ttf");
    -webkit-hyphens:none;
    -epub-hyphens:none;
    -moz-hyphens:none;
    hyphens:none;
    -moz-font-feature-settings: "hist=1, liga=1, dlig=1";
    -ms-font-feature-settings: "hist", "liga", "dlig";
    -webkit-font-feature-settings: "hist", "liga", "dlig";
    -o-font-feature-settings: "hist", "liga", "dlig";
    font-feature-settings: "hist", "liga", "dlig";
}

@font-face {
    font-family: "minya";
    font-weight: normal;
    font-style: italic;
    src: url("../Fonts/minya-it.ttf");
    -webkit-hyphens:none;
    -epub-hyphens:none;
    -moz-hyphens:none;
    hyphens:none;
    -moz-font-feature-settings: "hist=1, liga=1, dlig=1";
    -ms-font-feature-settings: "hist", "liga", "dlig";
    -webkit-font-feature-settings: "hist", "liga", "dlig";
    -o-font-feature-settings: "hist", "liga", "dlig";
    font-feature-settings: "hist", "liga", "dlig";
}

You would also not need special settings for the bold and italic tags then.

Also, be aware that some readers will ignore font-family set in the body. Also, in your snippet you forgot a closing }...

[Psymon]

Originally Posted by Toxaris

Why don't you specify the italic and bold version with the same font-family name and adjust the font-style and font-weight to correspond with the actual font? That way the reader should pick the right font anyway.

Because I'm dumb -- or was, but you enlightened me. This is one of those things that I know that I "knew" to do, but it's been so long I forgot.

Also, be aware that some readers will ignore font-family set in the body.

I'm not quite sure what you mean. Are you cautioning me that some readers will ignore embedded fonts? Or do you mean there's something wrong with this part of my CSS...

html>body {
	font-family: minya, 'Times New Roman', Times, serif;
	font-size: 124%;
}

body {
	font-family: minya, 'Times New Roman', Times, serif;
	font-size: 100%;
	line-height: 138%;
}

...(or something somewhere else)?

Thanks for your help!

[JSWolf]

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

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

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

That gets rid of all the garbage you had and correctly sets the font-family.

body {
	font-family: "minya";
}

That's all you need. When you make the text italic or bold, it will use the correct font style.

[theducks]

  font-family: "minya-it";
    font-weight: normal;
    font-style: normal;

Your problem was you said it was a Normal font in your @font

[dgatwood]

Originally Posted by theducks

  font-family: "minya-it";
    font-weight: normal;
    font-style: normal;

Your problem was you said it was a Normal font in your @font

This. With Adobe Digital Editions, IIRC, an @font rule only gets matched if the font-weight and font-style properties in the current CSS are a close or exact match for the corresponding values in the font declaration. Otherwise, the @font rule doesn't match, and it falls back to the inherited font from the parent element if applicable, or the default font otherwise.

You could also define the bold tag as using font-weight: normal and the italic tag as using font-style: italic, with the caveat that if the user changes the font, they'd lose all formatting that way.

[Toxaris]

Originally Posted by Psymon

I'm not quite sure what you mean. Are you cautioning me that some readers will ignore embedded fonts? Or do you mean there's something wrong with this part of my CSS...

html>body {
	font-family: minya, 'Times New Roman', Times, serif;
	font-size: 124%;
}

body {
	font-family: minya, 'Times New Roman', Times, serif;
	font-size: 100%;
	line-height: 138%;
}

...(or something somewhere else)?

Thanks for your help!

Correct, some readers ignore, or used to ignore, a font family set in the html or body tag. IIRC Nook was one, but I could be mistaken for another reader. For those readers you need to add the font-family for the paragrapgh tag for example.

[Psymon]

A couple replies here...

Originally Posted by Toxaris

Correct, some readers ignore, or used to ignore, a font family set in the html or body tag. IIRC Nook was one, but I could be mistaken for another reader. For those readers you need to add the font-family for the paragrapgh tag for example.

Oh, crap, I hate it when someone says something that has me wondering if I should go back and fix up ALL my previous ebooks!

So are you saying it'd be advisable to add in font-family for all my <p> tags, too?

Also, on a separate (but related) note, Woflie wrote...

Originally Posted by JSWolf

body {
	font-family: "minya";
	font-size: 100%;
}

That's all you need. When you make the text italic or bold, it will use the correct font style.

What I had had before was this...

html>body {
	font-family: minya, 'Times New Roman', Times, serif;
	font-size: 124%;
}

body {
	font-family: minya, 'Times New Roman', Times, serif;
	font-size: 100%;
	line-height: 138%;
}

I actually have no idea now why I included the "html>body..." part (and yes, I also just noticed that my font-sizes don't match -- oops!), but I'm sure I must have gotten that "recommendation" from these forums at some point, i.e. to include both the "body" specs in one CSS as well as "html>body" -- but don't ask me why, though, all I know is that I did that because someone, somewhere, told me to do it that way.

Either way, it certainly doesn't hurt to include both, does it (and then also the font-family attributes for <p>, of course)?

[JSWolf]

I've a nook STR and it does work with the font-family declared in body in CSS. I think you might have to specify publisher font (or something like that but it's been a while since I used the nook).

[JSWolf]

I made a slight mistake. You can also drop the font-size 100% from the body style. It's not needed.

[Psymon]

Originally Posted by JSWolf

I made a slight mistake. You can also drop the font-size 100% from the body style. It's not needed.

Why is it "not needed"? Do you mean because 100% is effectively redundant, because 100% would be the default anyway? I'm curious because you had included it yourself in your earlier reply, even in the "condensed" version of what I originally had.

And actually, for this particular book I wanted the font to be 124%, so isn't that where it would go?

Y'know, it's crazy, I've been doing web design since the mid-1990s, and I've been ebooking (off and on) for several years now, and it never ceases to amaze me how clueless I can be about the most utterly simple things sometimes. :/

[theducks]

I find that there are lots of redundant codes being used and I assumed that it was just a conversion from Word artifact.

font-size: 100%, 1em (AKA the body font size)
font-weight: normal /*unless in a span that is temporarily dropping the bold */


Wouldn't this work, without the need to modify all the classes? (if minya is the default for most P

p {font-family: "minya", serif; }

.fooclass {font-family: monospace; font-weight: bold; margin: 2em;}

[JSWolf]

Originally Posted by Psymon

Why is it "not needed"? Do you mean because 100% is effectively redundant, because 100% would be the default anyway? I'm curious because you had included it yourself in your earlier reply, even in the "condensed" version of what I originally had.

And actually, for this particular book I wanted the font to be 124%, so isn't that where it would go?

Y'know, it's crazy, I've been doing web design since the mid-1990s, and I've been ebooking (off and on) for several years now, and it never ceases to amaze me how clueless I can be about the most utterly simple things sometimes. :/

I've since edited my post and removed the 100%. It is not needed. You may have wanted 124%, but you put in 100%. You don't want 124% either. You use option to change the font size. You cannot guarantee that others won't change the font szie, so you set the font at the default size and set other fonts size in relation to 1em.

[JSWolf]

Originally Posted by theducks

p {font-family: "minya", serif; }

, serif is not needed.

[theducks]

Originally Posted by JSWolf

, serif is not needed.

Fallback is a good idea unless you are 100% positive your font request will be honored