Serif font in Browser Viewer?

[nqk]

Dear Kovid,

Thank you so much for popup footnote in the Browser Viewer - that is the important point for me as my books always have many notes. Great job.

However, I would like to read in serif fonts (as default, when no fonts are embedded). Current version forces me to use sans-serif.



And one issue that I have found: in black theme, the footnote text color is not changed, hence, blended into black background.

[kovidgoyal]

https://github.com/kovidgoyal/calibr...1730382b09bad1

https://github.com/kovidgoyal/calibr...77cec07f9eee28

[nqk]

Originally Posted by kovidgoyal

https://github.com/kovidgoyal/calibr...1730382b09bad1

https://github.com/kovidgoyal/calibr...77cec07f9eee28

Thank you, Kovid, for the updates in version 3.11.1, which fixed the footnote text color issue.

However, I am still unable to get the books to display in serif font nor embedded fonts with font-family family properly declared in their respective css files. I then even entered the following in the User style sheet (new feature) box. But it still doesn't work. The font is still sans-serif for every single text.

body {
font-family: serif;
}


And there is this "reload" issue. When I tap on the "Reload" button, the book is downloaded again for offline reading - which is good - but all the css properties seem to be either broken or ignored. All texts are now the same and left aligned, as though they are raw texts in Notepad. After quitting Chrome and loading it back again, the book is ok (of course the font issue remains). (Edit) Ah, I found out that I don't have to quit Chrome, just hit refresh button of Chrome itself.

[kovidgoyal]

That rule will work only if the book in question does not specify its own fonts. If you want to override book fonts you need something like

* {
font-family: serif !important;
}

[nqk]

Originally Posted by kovidgoyal

That rule will work only if the book in question does not specify its own fonts. If you want to override book fonts you need something like

* {
font-family: serif !important;
}

But even the book fonts are not displayed in serif, despite its declaration in embedded css.

I've attached a file as an example.

[kovidgoyal]

That would imply your browser has no serif fonts available, or its serif family has been set to a sans-serif font. The viewer does not do anything to CSS in the book, it leaves it up to the browser to render.

[nqk]

Originally Posted by kovidgoyal

That would imply your browser has no serif fonts available, or its serif family has been set to a sans-serif font. The viewer does not do anything to CSS in the book, it leaves it up to the browser to render.

I'm just using Chrome for Android and for Windows with no fancy settings. Hmm.

[kovidgoyal]

Actually, it might be inherintg a default style, this should do the trick:

https://github.com/kovidgoyal/calibr...37b8a8986242a1

[jackie_w]

@kovid,

Just a note to say that I tried your Browser Viewer fixes by running calibre from source. Everything is working OK for me in Chrome for Android on a Samsung phone.

The attached screenshot is for an epub whose only internal CSS font-family styles are for an embedded font which is used for headings and dropcaps. The font displayed for main body text appears to be Droid Serif. I did not need to set up any User stylesheet to do this (ETA: at least not knowingly).

[kovidgoyal]

Hmm thinking about it, I realize that I do want books that dont specify any fonts to default to sans-serif. But it should be easily overridable, by either a user stylesheet or styles in the book itself. I guess the best way to do that would be to add an extra stylesheet at the top with

html { font-family: sans-serif }

Then if either the user stylesheet or the book stylesheet specify any fonts they will override the default.

[kovidgoyal]

This should achieve that: https://github.com/kovidgoyal/calibr...604b491852285b

[jackie_w]

Originally Posted by kovidgoyal

Hmm thinking about it, I realize that I do want books that dont specify any fonts to default to sans-serif.

I'm the opposite. I don't ever want sans-serif to display unless I've explicitly set it in a CSS class. I'd never use it for my main body text.

Originally Posted by kovidgoyal

But it should be easily overridable, by either a user stylesheet or styles in the book itself. I guess the best way to do that would be to add an extra stylesheet at the top with

html { font-family: sans-serif }

Then if either the user stylesheet or the book stylesheet specify any fonts they will override the default.

When you say 'add an extra stylesheet at the top', do you mean somewhere in the calibre prefs? As a Kobo user I'd never want to add 'font-family:serif' in the book CSS files because in many cases it would stop the on-device font selection feature working properly. In Kobo-land font-family:serif is equivalent to enforcing font-family:Georgia.

[jackie_w]

OK, if I use Browser Viewer in Chrome in Windows 10 I can right-click to access settings Preferences>User style sheet and add body{font-family:serif}. This seems to work fine.

However, when using Chrome for Android what is the equivalent of the right-click to access settings? It's not immediately obvious to me how I can create a User style sheet.

[kovidgoyal]

Tap anywhere in the top quarter of the screen to access the controls.

[jackie_w]

Originally Posted by kovidgoyal

Tap anywhere in the top quarter of the screen to access the controls.

Thanks, that's working now I know where to press

For my info, should it also be possible, in the server's User style sheet, to define body's font-family such that it points to a font which is not embedded in the epub but which exists in a /font directory present in the Android phone's main memory?