[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;
}