embedded fonts vs e-reader fonts

[lumpynose]

Here's a tiny sample of an embedded font experiment of mine:

  <h1>Capitulum I</h1>

  <p><span class="courgette">Ea res est Helvetiis per</span> — courgette indicium 
enuntiata. Moribus suis Orgetoricem ex vinculis causam dicere coegerunt; damnatum 
poenam sequi oportebat, ut igni cremaretur.</p>

And the css for that courgette class is:

@font-face {
    font-family: Courgette-Regular;
    font-weight: normal;
    font-style: normal;
    src:url(../Fonts/Courgette-Regular.otf);
}

.courgette {
    font-family: "Courgette-Regular", sans-serif;
}

That works great.

As far as I can tell the e-reader I'm using, the Kobo Forma, doesn't let me change the base font, the one you get from specifying serif or sans-serif (or not specifying anything), when you use embedded fonts in its font settings. Its font setting choices are Publisher Default, which is what you use when the book has embedded fonts, or one of the built in fonts, Caecilia, Georgia, etc. If I don't specify a font for everything else then I get a font with pointy serifs, Georgia perhaps, but I would prefer a font with more slab like serifs. What I put in my css file is

html {
    font-family: "Bitter-Regular", serif;
}

strong, b {
    font-family: "Bitter-Bold", serif;
}

em, i {
    font-family: "Bitter-Italic", serif;
}

h1, h2, h3 {
    font-family: "Bitter-Bold", serif;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
}

Is this the normal way to change the "default" font when you're using embedded fonts?

[lumpynose]

I think I've figured it out; I need to have the font-family always be Bitter; e.g.

@font-face {
    font-family: Bitter;
    font-weight: normal;
    font-style: normal;
    src:url(../Fonts/Bitter-Regular.otf);
}

@font-face {
    font-family: Bitter;
    font-weight: bold;
    font-style: normal;
    src:url(../Fonts/Bitter-Bold.otf);
}

@font-face {
    font-family: Bitter;
    font-weight: normal;
    font-style: italic;
    src:url(../Fonts/Bitter-Italic.otf);
}

@font-face {
    font-family: Bitter;
    font-weight: bold;
    font-style: italic;
    src:url(../Fonts/Bitter-BoldItalic.otf);
}

Then my css only needs to be

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

strong, b {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

And I can remove the font-family from the h1, h2, h3.

[stumped]

just a heads-up unless you are doing this only for your own use, on one device, you need to think through what could go wrong when that book is opened on other devices.
it is also easy { been there, don that} to get muddled when previewing results on PC which may not have your favorite font-of-the-day activated]
in my case I had started using the amazon Caecilia font everywhere. I had copied it from Kindle to PC. Then I changed PC, forgetting that a new PC with a new install would not have that font....

[jackie_w]

@lumpynose,

I'm not sure whether you already know this, but if you're using a Kobo the easiest way to use Bitter as your standard font is to create a fonts directory in the root of your Kobo and copy the 4 Bitter .ttf files there. After a full power off/on you'll have Bitter as one of the options in the font list in the Aa pop-up. They should work fine no matter whether you're reading kepubs or standard epubs. Then you won't need to embed any fonts and you don't need any @font-faces.

You need to follow the correct naming convention for the .ttf files but, based on your post #2, it looks like your Bitter files are already correctly named.

Remove font-family completely from your body {...} CSS. This also helps to avoid problems if you want to read the epubs in a variety of epub reading apps.

A couple of other FYIs:

• you don't need the strong, b {...} or em, i {...} CSS styles.
• on a Kobo font-family:serif always gives you the built-in Georgia, so only use it if you don't mind that.
• if you want to be able to adjust the weight of sideloaded fonts, such as Bitter, there is a Kobo patch available to do that.
• if you find there is a problem with a sideloaded ttf font family, where bold and italic don't seem to be displaying correctly, there is usually a way to fix it with some minor surgery using a font editor such as the free FontForge.

[lumpynose]

Ok, thanks.

I've figured out my problem in the second question, e.g., where I needed to use bitter bold for the strong and b tags.

I'm not sure if you're answering my other, which is now an admittedly new question: if I have a class courgette as in my first example which uses an embedded font and there are no other @font-face or font-family things in my css, will the body font be Georgia? On the kobo using its reader I don't see any way to change that except to use an embedded font. On the other hand, with koreader, it does what I think is the right thing which is you can pick which font you want for the body font, when it's not specified in the css and you're using embedded fonts for just a class (e.g, a dingbat font or my courgette example).

In other words, assume my first example with courgette is all that there is. Won't the other text be in Georgia?

[jackie_w]

Originally Posted by lumpynose

Ok, thanks.

I've figured out my problem in the second question, e.g., where I needed to use bitter bold for the strong and b tags.

I'm not sure if you're answering my other, which is now an admittedly new question: if I have a class courgette as in my first example which uses an embedded font and there are no other @font-face or font-family things in my css, will the body font be Georgia? On the kobo using its reader I don't see any way to change that except to use an embedded font. On the other hand, with koreader, it does what I think is the right thing which is you can pick which font you want for the body font, when it's not specified in the css and you're using embedded fonts for just a class (e.g, a dingbat font or my courgette example).

In other words, assume my first example with courgette is all that there is. Won't the other text be in Georgia?

With Kobo, font-related questions can be a bit tricky to answer simply. The answer often varies depending on whether you're talking about a kepub or a standard epub. In fact you could probably write a small tome about it

I know nothing about Koreader but, in general, if there are no @font-face and no font-family in your CSS then all text will be displayed in the font you choose from the Aa pop-up, which can be a built-in font or a sideloaded one.

Both the kepub and the epub renderers have their own override CSS file which is used in conjunction with your Aa Font Face choice and the book's own CSS file. These 2 override CSS files (userStyle.css for epub, kepub-book.css for kepub) are not the same. The kepub one is more aggressive in its overrides than the epub one.

I'm not 100% sure about this, but I think that if you choose the 'Publisher Default' font then the override CSS file is not used.

It isn't actually true to say that you MUST choose 'Publisher Default' if you have any embedded fonts because it depends on where the embedded fonts are applied.

ETA: The following strike-through info about font-family is true for plain epub but not kepub ...

For example, if you have a fancy embedded font used only for headings (h1, h2 etc) then there is usually no need to choose 'Publisher Default'. You can quite happily select any font you like from the Aa menu to display your main body text and the headings will still display in the fancy font.

Similarly, if you apply the fancy font in a <span> class, as per your Courgette example, you should also not need to choose 'Publisher Default'.

It gets more tricky if you have <p class="courgette"> because, by default, both the epub and kepub override CSS's will zap it in favour of your Aa menu choice. In this case you would need to choose 'Publisher Default'.


If you want to embed a font to be used for <body>, as per your Bitter example, then I'm pretty sure you do need to select 'Publisher Default' because both override CSS files will zap your body font-family if you don't. At this point, I have to confess that I have no idea why any Kobo user would want/need to embed a body font when it's so easy to sideload fonts.

If the default override CSS files, for either epub or kepub, are causing you grief (as they do me) there are various Kobo patches available to bend them to your will. I won't elaborate right now.


Have you lost the will to live yet ...? If not ... about the generic values for font-family:serif or sans-serif or monospace ...

Once again, what you get depends on whether you're using epub or kepub.

For epub these are hard-coded in the firmware as Georgia, Avenir and CourierStd respectively. As CourierStd does not exist on the Kobo it seems an odd choice! If you want to see a monospace font you need to take action. You could embed one if you insist but, once again, the Kobo patching system offers a much simpler solution. If we can see the firmware code we can patch it, so it's fairly easy to change these 3 generic fonts to our 3 favourites (built-in and/or sideloaded).

I don't think anyone has found (yet) kepub equivalent patchable code for these generic font-family values but I think serif and sans-serif probably default to the same Georgia, Avenir as epub. I can't remember what monospace will display - probably Georgia or Avenir, I can't remember which. Whatever it is it won't be an actual monospace font.

I could go on and on, but I think I'll stop now

[lumpynose]

Originally Posted by jackie_w

Have you lost the will to live yet ...? If not ... about the generic values for font-family:serif or sans-serif or monospace ...

My eyes glazed over seeing this tome; gotta go run before it rains but I'll be back!

[jackie_w]

Originally Posted by lumpynose

My eyes glazed over seeing this tome; gotta go run before it rains but I'll be back!

Oh, that wasn't the tome, that was just the abridged version!

[lumpynose]

Originally Posted by jackie_w

It isn't actually true to say that you MUST choose 'Publisher Default' if you have any embedded fonts because it depends on where the embedded fonts are applied.

For example, if you have a fancy embedded font used only for headings (h1, h2 etc) then there is usually no need to choose 'Publisher Default'. You can quite happily select any font you like from the Aa menu to display your main body text and the headings will still display in the fancy font.

Similarly, if you apply the fancy font in a <span> class, as per your Courgette example, you should also not need to choose 'Publisher Default'.

None of those work for me; when I choose Caecilia everything is in that font. My css file has

h1, h2, h3 {
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
}

h1 {
    font-size: 1.2rem;
}

h2 {
    font-size: 1.1rem;
}

h3 {
    font-family: "Courgette-Regular", sans-serif;
    font-size: 1.0rem;
}

And the xhtml is as follows.

<body>
  <h1>Capitulum I</h1>

  <p><span class="courgette">Ea res est Helvetiis per</span> — courgette indicium <i>enuntiata</i>. <b>Moribus</b> suis Orgetoricem ex vinculis causam dicere coegerunt; damnatum poenam sequi oportebat, ut igni cremaretur.</p>

  <h2 class="courgette">Capitulum I-A</h2>

  <p><span class="devonshire">Ea res est Helvetiis per</span> — devonshire indicium enuntiata. Moribus suis Orgetoricem ex vinculis causam dicere coegerunt; damnatum poenam sequi oportebat, ut igni cremaretur.</p>

  <h3>Capitulum I-B</h3>

  <p><span class="drsugiyama">Ea res est Helvetiis per</span> — drsugiyama indicium enuntiata. Moribus suis Orgetoricem ex vinculis causam dicere coegerunt; damnatum poenam sequi oportebat, ut igni cremaretur.</p>

It's an epub3. I'm using the Kobo Touch Extended plugin. On the My Books page this book is listed as KOBO EPUB.

[lumpynose]

As per the instructions for the Kobo Touch Extended plugin I also installed the KePub Metadata Reader and KePub Metadata Writer plugins. I also have Kobo Utilities installed.

[jackie_w]

Originally Posted by lumpynose

It's an epub3. I'm using the Kobo Touch Extended plugin. On the My Books page this book is listed as KOBO EPUB.

As far as I know epub3 will work the same as epub2 as far as font-family is concerned. If you're using the KoboTouchExtended plugin I assume your books are kepub by the time they land on the Kobo. The other plugins are not relevant for this particular issue.

Originally Posted by lumpynose

None of those work for me; when I choose Caecilia everything is in that font.

I've just had a proper look at the latest firmware and yes, you're right. The kepub default override CSS for font-family is:

* { font-family: %1 !important; }

That's about aggressive as you can get, it's going to zap everything. Sorry for the bum steer.

In comparison the plain epub default override for font-family is:

body, p { font-family: -ua-default !important; }

so embedded fonts in <h1>, <h2> etc, <div> and <span> should survive.

I've been patching the overrides on my own Kobos for years to be the same for epub and kepub using only

body {font-family: ...}

But that might not suit everyone.

[lumpynose]

How are you looking at the firmware? On my pc I don't see the stuff I keep reading about. I'm also curious about installing the zork interpreter; I still have all of the infocom game files.

[lumpynose]

Thanks for digging into it. The body font isn't that big of a deal, I was mainly just curious and was wondering if I'd overlooked something. If it really mattered I'd install koreader on my kobo; at the moment it's only on a piece of junk Boox Note Pro whose built in reader doesn't even do embedded fonts on epubs.

[jackie_w]

Originally Posted by lumpynose

How are you looking at the firmware?

I just use a simple Hex editor (HxD). The file is called libnickel.so.1.0.0 in the unpacked KoboRoot.tgz file in dir /usr/local/Kobo. The override CSS is currently human-readable.

[lumpynose]

Ok, thanks. I'll just leave things as they are.