Traditional font styling in Kobo?

[jjalocha]

I am trying to get my EPUBs to render nicely on the Kobo: custom font, “advanced” font features, like small caps, old-style figures, ligatures.
I have spent countless hours, but I can’t get KOBO to display anything beyond the most basic styling.
I am at the end of my wits and any help would be really appreciated!

Use case:
• My personal EPUB files, prepared manually (from HTML, CSS, OPF, etc.).
• Prepared and used exclusively for my KOBO Clara 2E device, no interest in cross-device compatibility.
• My font of choice (has SC, OSF, etc.)
• I would like to side-load the font, but embedded is also acceptable (if absolutely unavoidable).
• Traditional/advanced font options are imperative (small caps, old-style figures, ligatures, etc.), ideally also variable font features (wght, opsz, wdth).

Setup:
• EPUB validates with epubcheck (no errors, no warnings).
• Kepubify displays no errors, no warnings.
• HTML is displayed correctly in Firefox and Chromium.
• EPUB and KEPUB is displayed correctly in desktop ebook reader.
• ‘Publisher Defaults’ setting.
• Kobo is up to date (4.38.23038).

The only styling recognized:
• Font family (only with embedded font).
• Regular and Italic font.
• Font size.
• Font weight (only when using Fixed font instead of variable font).
• Letter spacing.

Features not working:
• True small caps.
• Old-style figures.
• Standard ligatures.
• Kerning.
• Side-loaded fonts (not even system fonts).
• Hinting seems to be broken for many/most fonts?

I’ve attached a sample EPUB for your reference, and here’s a CSS extract.

/* Variable font */

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Regular.ttf") format("truetype");
    font-weight: 200 900;
    font-style: normal;
    font-optical-sizing: none;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Italic.ttf") format("truetype");
    font-weight: 200 900;
    font-style: italic;
    font-optical-sizing: none;
}

body {
    font-family: "Source Serif 4";
    font-weight: 400;
}

b { font-weight: 700; }
.sc { font-variant: small-caps; }
.osf { font-variant-numeric: oldstyle-nums; }
.lf { font-variant-numeric: lining-nums; }
.lig { font-variant-ligatures: common-ligatures; }
.kern { font-kerning: normal; }
.sys-font { font-family: "Caecilia"; }
.sl-font { font-family: "Bookerly"; }

/* It does display weight when using fixed font */

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

[DNSB]

For popup foonotes, you will need to use kepub. The RMSDK renderer used for epub will not do popup footnotes.

You might also want to try adding either text-rendering: optimizeLegibility; or text-rendering: geometricPrecision; to the body class in your stylesheet for kepubs.

Personally, I don't like these since when I tried them years back, they did odd things to the spacing between words especially with justified text.

[Aleron Ives]

You can also edit the Kobo configuration file to test optimizeLegibility and geometricPrecision without having to edit every book. IIRC geometricPrecision generally yields better word spacing than optimizeLegibility, but you get the best word spacing with optimizeSpeed, at the expense of ligatures and kerning.

[jjalocha]

Hello David and Aleron,
Thank you so much for helping me with this!
Indeed, text-rendering: geometricPrecision; fixes the rendering of ligatures!
Now, I still need to somehow render old style figures and true small caps (with the corresponding small lining figures).
Variable fonts would also be nice (to achieve truly matching font weights), but I think I can live with the fixed font weights.
Any idea how to achieve any of this?

(I forgot to mention: I am indeed using Kobo EPUB format, not standard EPUB. In my original post, I attached the plain EPUB file sample, because I don’t understand how much/what is altered during the conversion process with kepubify.)

[DNSB]

If you do some searching on MobileRead, you will find some information on features such as small-caps. One I had saved from a few years back was:

font-variant: small-caps;               /* high-level property          */
font-variant-caps: small-caps;          /* high-level property          */
-moz-font-feature-settings: 'smcp';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'smcp';  /* low-level (old Webkit)       */
font-feature-settings: 'smcp' on;       /* low-level (all new browsers) */

which worked on a couple of ePub3 ebooks with an OTF font with small caps.

Edit: I never bothered to break the code down to see which option actually triggered small caps in the ebooks I was playing with.

[JSWolf]

Originally Posted by DNSB

For popup foonotes, you will need to use kepub. The RMSDK renderer used for epub will not do popup footnotes.

You might also want to try adding either text-rendering: optimizeLegibility; or text-rendering: geometricPrecision; to the body class in your stylesheet for kepubs.

Personally, I don't like these since when I tried them years back, they did odd things to the spacing between words especially with justified text.

When the spacing does get messed up, it's not all that much. Overall, I'd take the occasional messed up word spacing to have kerning.

[JSWolf]

Originally Posted by DNSB

If you do some searching on MobileRead, you will find some information on features such as small-caps. One I had saved from a few years back was:

font-variant: small-caps;               /* high-level property          */
font-variant-caps: small-caps;          /* high-level property          */
-moz-font-feature-settings: 'smcp';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'smcp';  /* low-level (old Webkit)       */
font-feature-settings: 'smcp' on;       /* low-level (all new browsers) */

which worked on a couple of ePub3 ebooks with an OTF font with small caps.

Edit: I never bothered to break the code down to see which option actually triggered small caps in the ebooks I was playing with.

font-variant: small-caps;

works in KePub and it's the standard for ePub 3.

[Sirtel]

Originally Posted by JSWolf

When the spacing does get messed up, it's not all that much. Overall, I'd take the occasional messed up word spacing to have kerning.

While I would take missing kerning over messed up spacing any time. I care nothing about kerning, ligatures and other such bells and whistles. I do care about word and letter spacing. And I don't use hyphenation, so those bells and whistles mess up the text considerably in my case.

YMMV.

[jjalocha]

Hello DNSB and JSWolf,
Thanks for chiming in about the small caps issue!
Sadly, the extra instructions (on top of font-variant:small-caps;) don’t work for me, it still renders fake small caps, not the true glyphs provided by the font. (Also, still no old style figures.)
Here’s the relevant CSS:

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

body {
    font-family: "Source Serif 4";
    font-weight: 400;
    text-rendering: geometricPrecision;
}

.sc {
    font-variant: small-caps;               /* high-level property          */
    font-variant-caps: small-caps;          /* high-level property          */
    -moz-font-feature-settings: "smcp";     /* low-level (old Firefox)      */
    -webkit-font-feature-settings: "smcp";  /* low-level (old Webkit)       */
    font-feature-settings: "smcp" on;       /* low-level (all new browsers) */
}
.osf { font-variant-numeric: oldstyle-nums; }

[jjalocha]

Hello all,
For the record, I wanted to mention that I’ve installed KOReader, and am impressed so far.
I don’t think they get every desirable styling feature possible, but the basics are definitely there.
I‘ve attached a screenshot for your reference. (Shout out to the gorgeous Skolar font from Rosetta Type, btw.)
Thank you all for your kind help!
–J

[JSWolf]

Originally Posted by jjalocha

Hello DNSB and JSWolf,
Thanks for chiming in about the small caps issue!
Sadly, the extra instructions (on top of font-variant:small-caps;) don’t work for me, it still renders fake small caps, not the true glyphs provided by the font. (Also, still no old style figures.)
Here’s the relevant CSS:

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

body {
    font-family: "Source Serif 4";
    font-weight: 400;
    text-rendering: geometricPrecision;
}

.sc {
    font-variant: small-caps;               /* high-level property          */
    font-variant-caps: small-caps;          /* high-level property          */
    -moz-font-feature-settings: "smcp";     /* low-level (old Firefox)      */
    -webkit-font-feature-settings: "smcp";  /* low-level (old Webkit)       */
    font-feature-settings: "smcp" on;       /* low-level (all new browsers) */
}
.osf { font-variant-numeric: oldstyle-nums; }

I've cleaned up your CSS and it does work. I wasn't able to test with your font. But if your font is correctly defined and it supports smallcaps, then you will be OK. One thing though to get smallcaps, the text has to be lower case. Uppercase stays as uppercase. So if you are converting from a book using a font size for small caps, you'll also have to use text-transform: lowercase;.

@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Italic.ttf);
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Bold.ttf);
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}
body {
  font-family: "Source Serif 4";
}
.osf {
  font-variant-numeric: oldstyle-nums;
}
.sc {
  font-variant: small-caps;
}

[ZodWallop]

Originally Posted by Sirtel

While I would take missing kerning over messed up spacing any time. I care nothing about kerning, ligatures and other such bells and whistles. I do care about word and letter spacing.

What made me even notice ligatures in the first place was my old Nook STwG which did a very good job on text layout. Except I noticed on a few fonts that words with an 'fi' combination, the dot of the 'i' would overlap with the 'f' and I'd get this odd blob that looked like a 45-degree angled figure 8. Once I noticed it, it became distracting. So ligatures at least are more than just a nicety, for me.