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.