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 cant 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?
Ive attached a sample EPUB for your reference, and heres a CSS extract.
I have spent countless hours, but I cant 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?
Ive attached a sample EPUB for your reference, and heres a CSS extract.
Code:
/* 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;
}
