![]() |
#1 |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Jun 2023
Device: Kobo Clara 2E
|
Traditional font styling in Kobo?
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. 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; } |
![]() |
![]() |
![]() |
#2 |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 38,817
Karma: 153006036
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
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. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,330
Karma: 16297052
Join Date: Sep 2022
Device: Kobo Libra 2
|
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.
|
![]() |
![]() |
![]() |
#4 |
Junior Member
![]() Posts: 6
Karma: 10
Join Date: Jun 2023
Device: Kobo Clara 2E
|
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.) Last edited by jjalocha; Today at 06:49 AM. |
![]() |
![]() |
![]() |
#5 |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 38,817
Karma: 153006036
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
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:
Code:
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) */ Edit: I never bothered to break the code down to see which option actually triggered small caps in the ebooks I was playing with. Last edited by DNSB; Today at 01:57 PM. |
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,650
Karma: 134254544
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
#7 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,650
Karma: 134254544
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Code:
font-variant: small-caps; |
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Conversion-->Look & feel-->Styling: font-family has no effect | ALiSMoNiToS | Conversion | 2 | 11-18-2021 11:45 PM |
Font Forge and adding font weight for Kobo? | Alanon | Kobo Reader | 7 | 12-12-2019 04:35 PM |
Aura ONE Help with Traditional Chinese on Kobo Aura One | DiegoArmando | Kobo Reader | 0 | 08-04-2018 04:09 PM |
Question about styling Font-Size | GrannyGrump | Workshop | 6 | 03-17-2017 01:17 AM |
Font weight and other styling with RTF for BeBook | spaze | Other formats | 1 | 09-05-2009 03:25 PM |