Add fonts to Calibre epub

[Mohrwyn]

I'm having trouble with embedding fonts in Calibre. The conversion from docx to epub is no problem. Everything looks fine in the Calibre viewer, even the fonts.
But I only get to see the choosen fonts in the Calibre viewer. Not in Adobe Digital Editions, not in the e-reader on my iPhone. It doesn't matter whether or not I choose to embed the fonts I used in my docx or not.
Nor does it seem to help if I install the fonts when setting up the conversion in Calibre.

So I decided to see what I could do with CSS. When I edit my epub in Calibre, there is no mention of fonts on the left side (were all the CSS stuff is shown). Again, whether I've embedded them or not during the setup for conversion. It simply says Fonts: 0.

In the stylesheet, both fonts I use, are mentioned (and again, whether I've embedded them or not during the setup for conversion). But are still only visible in the Calibre viewer. Not in ADE or on my phone.

I've also tried it with a docx without the choosen fonts, hoping I could add the fonts when editing the epub.

And I can't install the font families. I looks like it does, I can choose and add them, but they don't appear in the list.
I'm using two Google fonts, so it should be working.

How do I add fonts to the Font stylesheet mentioned on the left side of the edit screen? How do I make the fonts visible in other readers beside Calibre?

Hopefully some of you have the solution for me!

[Brett Merkey]

It is hard to tell exactly what your problem is from the description. Also, it is possible that your e-readers do not display embedded fonts until a specific setting is made, as is necessary with Kindles.

Below are the steps I take to successfully embed fonts. Perhaps it will help you...

1) in Edit tool, import .ttf or .otf file previously downloaded from Google Fonts. Calibre will automatically put that file in its Fonts section.

2) in CSS file, add font-face rule. e.g.
@font-face {
font-family: "Lobster";
src: url(../Lobster_1.3.otf);
}

3) add font to rules e.g.
h2 {
font-size: 2em;
font-family: "Lobster", cursive;
color: #8f0bf4;
text-shadow: 2px 2px 2px #000;
}

[stumped]

the other approach is to accept that the reader will select the font, not the author. both kindles and Kobo devices offer 6 or more fonts which you can select using the device menus( plus it is not hard to add fonts to the device, which all books can then access)
all that the book has to do is NOT try to enforce a font, so that the reader device can take control
( same goes for line heights, margins, justification )

can't speak for i phones, don't have one... but the apple philosophy is all users are idiots, lock everything down... so forcing any font to show up on an apple device may be problematic.

[JSWolf]

Wy do you need to embed fonts? Are you doing this for yourself or to sell? If it is for yourself, what device and software are you using to read with?

If this is an eBook for sale, are you embedding a font that going to be used as the body font? If so, are you 100% sure you need to do this? Embedding a font for the body is not a good idea.

[JSWolf]

The following code will embed the font ChareInk. The source URL will have to be changed for where your fonts are relative to he CSS. This embeds all 4 font styles in the font family.

@font-face {
font-family:"ChareInk";
font-style: normal;
font-weight: normal;
src: url(../fonts/ChareInk-Regular.ttf);
}
@font-face {
 font-family:"ChareInk"; 
 font-style: normal; 
 font-weight: bold; 
 src: url(../fonts/ChareInk-Bold.ttf);
}
@font-face {
 font-family:"ChareInk";
 font-style: italic; 
 font-weight: normal; 
 src: url(../fonts/ChareInk-Italic.ttf);
}
@font-face {
 font-family:"CharInk"; 
 font-style: italic; 
 font-weight: bold; 
 src: url(../fonts/ChareInk-BoldItalic.ttf);
}

[JSWolf]

Originally Posted by Brett Merkey

3) add font to rules e.g.
h2 {
font-size: 2em;
font-family: "Lobster", cursive;
color: #8f0bf4;
text-shadow: 2px 2px 2px #000;
}

I don't know of any software that would use a cursive font if Lobster didn't exist. Also, if Lobster didn't exist, then you have a serious issue with your ePub that needs to be fixed. So you can dump cursive. The CSS line you want is just

Font-family: "Lobster";

The only advantage I see in doing something like font-family: "font", sans-serif; means it's easy for me to just dump that line to just sans-serif if I don't want that font embedded.

[JSWolf]

Originally Posted by stumped

the other approach is to accept that the reader will select the font, not the author. both kindles and Kobo devices offer 6 or more fonts which you can select using the device menus( plus it is not hard to add fonts to the device, which all books can then access)
all that the book has to do is NOT try to enforce a font, so that the reader device can take control
( same goes for line heights, margins, justification )

can't speak for i phones, don't have one... but the apple philosophy is all users are idiots, lock everything down... so forcing any font to show up on an apple device may be problematic.

I have sometimes left in some fonts if they are for decoration say the chapter titles.

[theducks]

The Calibre editor will offer up a CSS template when you add (import) a font file. (you do need to touch up the weight, style )

[Mohrwyn]

Thank you for your explanation. The problem is your first step. Calibre does not add the installed fonts to the fonts section. Only to the stylesheet.css. I thought that's why the fonts didn't show up in other devices.

Reading the other replies, I'm starting to doubt putting in my own fonts...

[Mohrwyn]

That's food for thought, thank you so much! I'll reconsider putting in my own fonts.

[Mohrwyn]

It's for sale. Reading all the replies made me reconsider whether or not to put in my own fonts... Thank you!

[Mohrwyn]

Reading all the replies, I'm reconsidering putting in my own fonts. But if I decide to, I'll certainly give your css example a try! Thank you.

[JSWolf]

Originally Posted by Mohrwyn

Reading all the replies, I'm reconsidering putting in my own fonts. But if I decide to, I'll certainly give your css example a try! Thank you.

Are you embedding for use as the body font or for other uses such as the chapter header?

[Mohrwyn]

Originally Posted by JSWolf

Are you embedding for use as the body font or for other uses such as the chapter header?

I had fonts for both. But if I better not embed a font for the body text, then it's hardly necessary to embed one for the chapter headers. I can simply choose a serif font for the chapter headers to differ them from the (sans serif) body text.

[JSWolf]

Originally Posted by Mohrwyn

I had fonts for both. But if I better not embed a font for the body text, then it's hardly necessary to embed one for the chapter headers. I can simply choose a serif font for the chapter headers to differ them from the (sans serif) body text.

Good idea to drop the embedded fonts. The other thing you would have to do is is check if the fonts you were going to embed were acceptable for use with eInk. A lot of fonts are too light for use with eInk. I've seen too many eBooks using Adobe Garamond to match the print edition and it's way too light for eInk.