MobileRead Forums

MobileRead Forums (https://www.mobileread.com/forums/index.php)
-   Kobo Reader (https://www.mobileread.com/forums/forumdisplay.php?f=223)
-   -   Accessing fonts from CSS (https://www.mobileread.com/forums/showthread.php?t=248249)

JSWolf 10-18-2014 11:06 PM

Accessing fonts from CSS
 
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 10-18-2014 11:48 PM

Quote:

Originally Posted by JSWolf (Post 2951809)
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 10-18-2014 11:50 PM

Quote:

Originally Posted by JSWolf (Post 2951809)
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
Code:

@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 10-19-2014 05:09 AM

Quote:

Originally Posted by JSWolf (Post 2951809)
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 10-19-2014 12:00 PM

Quote:

Originally Posted by Jellby (Post 2951942)
That's use or reference fonts, not embed.

True that. My mistake.

dmapr 10-25-2014 12:04 PM

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?

Code:

@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 10-25-2014 12:26 PM

Quote:

Originally Posted by dmapr (Post 2957916)
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 10-25-2014 01:25 PM

Quote:

Originally Posted by dmapr (Post 2957916)
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 10-25-2014 03:11 PM

Quote:

Originally Posted by Anak (Post 2957942)
@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.

Quote:

Originally Posted by jackie_w (Post 2958020)
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 07-01-2015 09:43 AM

Quote:

Originally Posted by jackie_w (Post 2958020)
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 07-01-2015 11:42 AM

Quote:

Originally Posted by dmapr (Post 3126652)
@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 07-03-2015 11:49 AM

Quote:

Originally Posted by jackie_w (Post 3126727)
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.


All times are GMT -4. The time now is 06:52 PM.

Powered by: vBulletin
Copyright ©2000 - 3.8.5, Jelsoft Enterprises Ltd.
MobileRead.com is a privately owned, operated and funded community.