Accessing fonts from CSS

[JSWolf]

Is there a way to reference fonts that are installed someplace on the Kobo Reader without actually embedding them? I ask because while you can use your choice of fonts, you cannot use more then one font family. So if I want true small caps (for example), I'd have to embed both font families. On 650 & T1, I can use CSS code to access the fonts installed on the Readers without having to embed them in the eBooks. Can I do this on a Kobo Reader using firmware 3.8.0?

[GeoffR]

Originally Posted by JSWolf

Is there a way to embed fonts that are installed someplace on the Kobo Reader without actually embedding them? I ask because while you can use your choice of fonts, you cannot use more then one font family. So if I want true small caps (for example), I'd have to embed both font families. On 650 & T1, I can use CSS code to access the fonts installed on the Readers without having to embed them in the eBooks. Can I do this on a Kobo Reader using firmware 3.8.0?

Yes, this post explains how to reference your sideloaded fonts from a book's stylesheet: https://www.mobileread.com/forums/sho...1&postcount=12

[jackie_w]

Originally Posted by JSWolf

Is there a way to embed fonts that are installed someplace on the Kobo Reader without actually embedding them? I ask because while you can use your choice of fonts, you cannot use more then one font family. So if I want true small caps (for example), I'd have to embed both font families. On 650 & T1, I can use CSS code to access the fonts installed on the Readers without having to embed them in the eBooks. Can I do this on a Kobo Reader using firmware 3.8.0?

Yes, you can. This is what I use for small-caps in the kobo_extra.css file used by calibre's KOBOTOUCH driver's 'Modify CSS' option

@font-face {font-family: "SCfont"; font-weight: normal; font-style: normal; src: url("res:///fonts/normal/Charis SIL SmCp")}
@font-face {font-family: "SCfont"; font-weight: bold; font-style: normal; src: url("res:///fonts/bold/Charis SIL SmCp")}
@font-face {font-family: "SCfont"; font-weight: normal; font-style: italic; src: url("res:///fonts/italic/Charis SIL SmCp")}
@font-face {font-family: "SCfont"; font-weight: bold; font-style: italic; src: url("res:///fonts/bolditalic/Charis SIL SmCp")}

My label "SCfont" can be anything you like as long as it matches what you've used in the epub's main css file.
The Charis SIL SmCp must match the font's internal and external name.

[Jellby]

Originally Posted by JSWolf

Is there a way to embed fonts that are installed someplace on the Kobo Reader without actually embedding them?

That's use or reference fonts, not embed.

[JSWolf]

Originally Posted by Jellby

That's use or reference fonts, not embed.

True that. My mistake.

[dmapr]

A somewhat related question. I have tried to use the technique described by jackie_w to add monospace fonts and occasionally it would result in the book ignoring ALL CSS, while other books worked fine. Can anyone spot anything wrong with my kobo_extra.css?

@font-face {font-family: monospace; font-weight: normal; font-style: normal; src: url("res:///fonts/normal/Consolas")}
@font-face {font-family: monospace; font-weight: bold; font-style: normal; src: url("res:///fonts/bold/Consolas")}
@font-face {font-family: monospace; font-weight: normal; font-style: italic; src: url("res:///fonts/italic/Consolas")}
@font-face {font-family: monospace; font-weight: bold; font-style: italic; src: url("res:///fonts/bolditalic/Consolas")}

pre, code, tt {
   font-family: monospace; 
   font-size: 80%;
}

[Anak]

Originally Posted by dmapr

book ignoring ALL CSS, while other books worked fine.

@dmapr. There is nothing wrong with your code.
Are you sure that the original stylesheet is correct?
A minor error (i.e. a missing semicolon ; ) will break the CSS on Kobo ereaders while Sigil displays the output as intended.

CSS Validation Tool: http://jigsaw.w3.org/css-validator/validator

[jackie_w]

Originally Posted by dmapr

A somewhat related question. I have tried to use the technique described by jackie_w to add monospace fonts and occasionally it would result in the book ignoring ALL CSS, while other books worked fine. Can anyone spot anything wrong with my kobo_extra.css?

Another thing to try... I've also experienced all css being ignored. Find a book with the problem and have a look at its internal css. Do you see any occurrences of !important in there? If so remove them and try again.

[dmapr]

Originally Posted by Anak

@dmapr. There is nothing wrong with your code.
Are you sure that the original stylesheet is correct?
A minor error (i.e. a missing semicolon ; ) will break the CSS on Kobo ereaders while Sigil displays the output as intended.

CSS Validation Tool: http://jigsaw.w3.org/css-validator/validator

I did not spot anything obvious like that while looking at the merged CSS file, and the original CSS works if I don't use the extras. I suppose I should try to run the merged one through the validator if I run into this again, thanks for the link.

Originally Posted by jackie_w

Another thing to try... I've also experienced all css being ignored. Find a book with the problem and have a look at its internal css. Do you see any occurrences of !important in there? If so remove them and try again.

Thanks for the tip. Next time I run into this I'll check for that.

[dmapr]

Originally Posted by jackie_w

Another thing to try... I've also experienced all css being ignored. Find a book with the problem and have a look at its internal css. Do you see any occurrences of !important in there? If so remove them and try again.

@jackie_w, finally ran into this again — you're right, the CSS had a few (seemingly unrelated) rules with !important. Removing the !important fixed things. Any idea why adding font references would cause such an effect?

[jackie_w]

Originally Posted by dmapr

@jackie_w, finally ran into this again — you're right, the CSS had a few (seemingly unrelated) rules with !important. Removing the !important fixed things. Any idea why adding font references would cause such an effect?

None at all, I'm afraid

It may have absolutely nothing to do with adding font references. It may be some toxic combination of !important and the cssutils Python package which is used to apply the rules from your kobo_extra.css file - which just happen to be font references in your case. However, this doesn't make any sense to me either as I've no reason to believe there's anything wrong with cssutils (which I use every day for css tweaking) and !important is valid css.

If you want to troubleshoot it, have you tried temporarily disabling kobo_extra.css and adding your font rules manually - also leaving the !important occurrences as-is? Does the Kobo still reject the whole css file?

For myself I've side-stepped the problem by auto-removing all occurrences of !important whenever I tweak css because I can see no good reason for a well-constructed book to need them in the internal css.

[dmapr]

Originally Posted by jackie_w

None at all, I'm afraid

It may have absolutely nothing to do with adding font references. It may be some toxic combination of !important and the cssutils Python package which is used to apply the rules from your kobo_extra.css file - which just happen to be font references in your case. However, this doesn't make any sense to me either as I've no reason to believe there's anything wrong with cssutils (which I use every day for css tweaking) and !important is valid css.

If you want to troubleshoot it, have you tried temporarily disabling kobo_extra.css and adding your font rules manually - also leaving the !important occurrences as-is? Does the Kobo still reject the whole css file?

For myself I've side-stepped the problem by auto-removing all occurrences of !important whenever I tweak css because I can see no good reason for a well-constructed book to need them in the internal css.

I have certainly seen some differences in the book rendering in my experimentation between CSS being added manually and auto-applied from kobo_extra.css, but that made no sense either I do not recall if !important was involved in that particular setup, and I think the only issue was whether it would actually use the monospace font or not, the remainder of the CSS worked fine.

I ended up doing the same thing you do — I strip out all !important from the CSS. In all cases I've seen so far it was in the CSS I had absolutely no interest in to begin with.