font-family in <body> HTML or body{} CSS?

enuddleyarbl · 09-30-2022, 12:34 PM

Up until now, I've stripped all font information out of my epubs and read with a specific font on my Kobo. I thought I'd try keeping an epub's specific fonts in the book and have a basic question:

The book I'm working with has the following in each file's <body> tag:

Code:

<body ... style="font-family:'new caledonia lt std',georgia,serif;">

Wouldn't adding that to the stylesheet's body{} style be better?

Code:

body {
/* Basic Styling for BODY Section of a File */
	font-family:   new caledonia lt std, georgia, serif;
	height:	100%;
	margin:	0;
	orphans:	1;
	padding:	0;
	widows:	1;
}

RbnJrg · 09-30-2022, 01:16 PM

Quote:

Originally Posted by enuddleyarbl

Wouldn't adding that to the stylesheet's body{} style be better?

Code:

body {
/* Basic Styling for BODY Section of a File */
	font-family:   new caledonia lt std, georgia, serif;
	height:	100%;
	margin:	0;
	orphans:	1;
	padding:	0;
	widows:	1;
}

In order to work you must enclose in quotes "new caledonia lt std" because of the spaces in the name (otherwise the reader won't find the font), so your code would be something like:

Code:

body {
/* Basic Styling for BODY Section of a File */
	font-family:   "new caledonia lt std", georgia, serif;
	height:	100%;
	margin:	0;
	orphans:	1;
	padding:	0;
	widows:	1;
}

Of course, instead of styling "inline", is better to style with the stylesheet because of that way, changes are easier to do. If in a future you decide to employ instead of "new caledonia lt std" let's say "Times New Roman", "Times" or whatever, then you need to do changes in only one place (the css stylesheet) by replacing:

Code:

font-family:  "new caledonia lt std", georgia, serif;

with

Code:

font-family:  "Times New Roman", georgia, serif;

enuddleyarbl · 09-30-2022, 01:21 PM

Quote:

Originally Posted by RbnJrg

In order to work you must enclose in quotes "new caledonia lt std" because of the spaces in the name (otherwise the reader won't find the font), so your code would be something like:

Code:

body {
/* Basic Styling for BODY Section of a File */
	font-family:   "new caledonia lt std", georgia, serif;
	height:	100%;
	margin:	0;
	orphans:	1;
	padding:	0;
	widows:	1;
}

Of course, instead of styling "inline", is better to style with the stylesheet because of that way, changes are easier to do. If in a future you decide to employ instead of "new caledonia lt std" let's say "Times New Roman", "Times" or whatever, then you need to do changes in only one place (the css stylesheet) by replacing:

Code:

font-family:  "new caledonia lt std", georgia, serif;

with

Code:

font-family:  "Times New Roman", georgia, serif;

Thanks, I'll make the switch then. And, good catch with my lack of quotes.

Turtle91 · 09-30-2022, 04:44 PM

The other thing to think about… is allowing the user to pick the font they like to read with. IIRC you are doing this for your own personal use, so putting it in the body tag is fine. In general, however, I would only define a specific font in areas where you REALLY need it: headers, letters, songs, poems, etc. Hopefully, that font would help tell the story.

enuddleyarbl · 09-30-2022, 05:50 PM

Quote:

Originally Posted by Turtle91

The other thing to think about… is allowing the user to pick the font they like to read with. IIRC you are doing this for your own personal use, so putting it in the body tag is fine. In general, however, I would only define a specific font in areas where you REALLY need it: headers, letters, songs, poems, etc. Hopefully, that font would help tell the story.

It's odd that the publisher set the general font in the <body>. After having gone through the code, it looks like for the rest of the book, they chose specific fonts just as you described: epigraphs, headers, notes, first-letter, and first-line. More oddly, none of those fonts match what was in the <body>. Perhaps they complement each other.

JSWolf · 09-30-2022, 06:11 PM

A lot of times, the font-family in the CSS is garbage, There are no embedded fonts and all there is is a font-family line specifying fonts that don't exist in the ePub.

Karellen · 09-30-2022, 06:34 PM

I started cleaning up a book yesterday and for a few minutes couldn't figure out why the font was so large on all the pages.

CSS was clean as I had replaced it. There was no in-line styling. The <body> tag was clean, no <div> tags.

Ends up the styling was in the html tag, which I had not seen before in any other book...

PHP Code:


			
<?xml version='1.0' encoding='utf-8'?>

<html xmlns="http://www.w3.org/1999/xhtml" style="font-size:1.250rem;">

A quick S&R fixed it.

hobnail · 09-30-2022, 07:09 PM

Quote:

Originally Posted by JSWolf

A lot of times, the font-family in the CSS is garbage, There are no embedded fonts and all there is is a font-family line specifying fonts that don't exist in the ePub.

I've always wondered about this, why they do it. I was guessing that maybe they're copying font specifications that were used in the print version.

hobnail · 09-30-2022, 07:11 PM

Quote:

Originally Posted by Karellen

I started cleaning up a book yesterday and for a few minutes couldn't figure out why the font was so large on all the pages.

CSS was clean as I had replaced it. There was no in-line styling. The <body> tag was clean, no <div> tags.

Ends up the styling was in the html tag, which I had not seen before in any other book...

PHP Code:


			
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" style="font-size:1.250rem;">

A quick S&R fixed it.

I always have calibre convert the book. Even if it's an epub I'll do an epub to epub conversion. I don't know, but I suspect (hope) that calibre would fix this and put it in the stylesheet.css file.

enuddleyarbl · 09-30-2022, 07:18 PM

Quote:

Originally Posted by Karellen

I started cleaning up a book yesterday and for a few minutes couldn't figure out why the font was so large on all the pages.

CSS was clean as I had replaced it. There was no in-line styling. The <body> tag was clean, no <div> tags.

Ends up the styling was in the html tag, which I had not seen before in any other book...

PHP Code:


			
<?xml version='1.0' encoding='utf-8'?>

<html xmlns="http://www.w3.org/1999/xhtml" style="font-size:1.250rem;">

A quick S&R fixed it.

I ran across something like that a week or so ago. I think I'll set up a saved search to look for any style= tags (just in case I don't catch one of those if it happens again).

Karellen · 09-30-2022, 07:25 PM

Quote:

Originally Posted by hobnail

I always have calibre convert the book. Even if it's an epub I'll do an epub to epub conversion. I don't know, but I suspect (hope) that calibre would fix this and put it in the stylesheet.css file.

I did a KindleUnpack on that book.

enuddleyarbl · 09-30-2022, 09:56 PM

OK. Different font question for a different book (Brandon Sanderson's "Steelheart":
https://www.amazon.com/gp/product/B0...?ie=UTF8&psc=1).
Downloaded it fresh from Amazon. Added it to Calibre and had it convert to EPUB3. Edited the epub and there's no fonts in the font section and no encryption.xml. But, in the various stylesheets, there are 3 sets of fonts listed (free font sans, serif and mono (4 versions each)). All of them are listed in the stylesheet with:

Code:

src: url(XXXXXXXXXXXXXXXX);

and none show in the OPF or anywhere in the book.

Are these those obfuscated fonts I keep reading about?

jhowell · 10-01-2022, 03:29 AM

Quote:

Originally Posted by enuddleyarbl

Are these those obfuscated fonts I keep reading about?

No. My understanding is that a file reference replaced by sixteen "X" characters in KF8 format means that it was removed during conversion, usually because it was unreferenced.

JSWolf · 10-01-2022, 10:56 AM

Quote:

Originally Posted by hobnail

I've always wondered about this, why they do it. I was guessing that maybe they're copying font specifications that were used in the print version.

One of the reasons it's done is because when they do it, they see the font being used because the font is on that computer and the program used to make the ePub or used to test the ePub uses the font from the system.

But overall, it's just wrong. Another thing is wrong is trying to duplicate the font used in the pBook when it's totally wrong for eInk. In most cases, it's some form of Garamond and that's too light for eInk.

JSWolf · 10-01-2022, 10:57 AM

Quote:

Originally Posted by hobnail

I always have calibre convert the book. Even if it's an epub I'll do an epub to epub conversion. I don't know, but I suspect (hope) that calibre would fix this and put it in the stylesheet.css file.

I rarely convert ePub > ePub. I just go in and fix the code by hand.

09-30-2022, 12:34 PM	#1
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	font-family in <body> HTML or body{} CSS? Up until now, I've stripped all font information out of my epubs and read with a specific font on my Kobo. I thought I'd try keeping an epub's specific fonts in the book and have a basic question: The book I'm working with has the following in each file's <body> tag: Code: <body ... style="font-family:'new caledonia lt std',georgia,serif;"> Wouldn't adding that to the stylesheet's body{} style be better? Code: body { /* Basic Styling for BODY Section of a File */ font-family: new caledonia lt std, georgia, serif; height: 100%; margin: 0; orphans: 1; padding: 0; widows: 1; }

09-30-2022, 06:34 PM	#7
Karellen Wizard Posts: 1,094 Karma: 4911876 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	I started cleaning up a book yesterday and for a few minutes couldn't figure out why the font was so large on all the pages. CSS was clean as I had replaced it. There was no in-line styling. The <body> tag was clean, no <div> tags. Ends up the styling was in the html tag, which I had not seen before in any other book... PHP Code: `<?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml" style="font-size:1.250rem;">` A quick S&R fixed it.

09-30-2022, 09:56 PM	#12
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	OK. Different font question for a different book (Brandon Sanderson's "Steelheart": https://www.amazon.com/gp/product/B0...?ie=UTF8&psc=1). Downloaded it fresh from Amazon. Added it to Calibre and had it convert to EPUB3. Edited the epub and there's no fonts in the font section and no encryption.xml. But, in the various stylesheets, there are 3 sets of fonts listed (free font sans, serif and mono (4 versions each)). All of them are listed in the stylesheet with: Code: src: url(XXXXXXXXXXXXXXXX); and none show in the OPF or anywhere in the book. Are these those obfuscated fonts I keep reading about?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub CSS Stylesheet: body, html {...?	enuddleyarbl	ePub	28	09-12-2022 04:09 PM
Calibre default CSS to <body>	heitormsilva	Conversion	11	11-24-2017 10:46 AM
In CSS, * or body?	Arios	ePub	10	11-03-2015 10:15 AM
CSS <body> vs. <p> question	Amalthia	Conversion	7	01-21-2014 01:50 AM
How to change the font-size in the body tag in css?	naisren	Conversion	2	10-01-2012 05:52 PM

09-30-2022, 04:44 PM	#4
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	The other thing to think about… is allowing the user to pick the font they like to read with. IIRC you are doing this for your own personal use, so putting it in the body tag is fine. In general, however, I would only define a specific font in areas where you REALLY need it: headers, letters, songs, poems, etc. Hopefully, that font would help tell the story.

09-30-2022, 06:11 PM	#6
JSWolf Resident Curmudgeon Posts: 73,983 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	A lot of times, the font-family in the CSS is garbage, There are no embedded fonts and all there is is a font-family line specifying fonts that don't exist in the ePub.