Hey there. I published an ebook recently in epub 3 format using SIGIL. After submitting it for distribution, I checked the book's preview at ebooks.com and found that the font was changed to sans serif and there was no leading. It was a disaster to look at — like it had lost part of its css code.

Yet when I went to Kobo or Barnes & Noble, my previews there looked fine. Not spectacular, but closer to what I would expect to see.

Anyone know what might be going on based on your own experiences with online preview engines? (or perhaps that ebook retailer specifically?)

I'm still relatively new to publishing ebooks online, so I'd like to iron out the kinks before submitting more of my work to booksellers. I can't imagine anyone wanting to buy my book with a crappy preview like what I saw.

Thanks for any insights you can offer.

(here's the link for reference purposes
https://www.ebooks.com/en-ca/book/210521588/clearing-a-path-to-joy/kriewaldt-roland-w/
FWIW, You might want to ask this question in Mobileread's epub forum as it is not specific to Sigil.
Some rendering engines are more picky than others.

If you haven't already done so:

• Install my EPUBCheck plugin and check your book with it. (This plugin requires Java.)
• Install my CSSValidator plugin or use the online CSS validator via the Validate with W3C option in Sigil to check your stylesheets.

If either validator reports errors, post them in the EPUB forum.
Well, yes, that's a bit of a problem.

However, I have to say that it's always best to assume that any careful "typesetting" in eBooks, is going to go awry. I wasn't able to find the ebook on B&N, (paperback, yes; eBook, no) despite several searches; I found it on Kobo, but I've been waiting for some time for the Preview to render with no joy. FYI, 3 other books that I tried to preview on Kobo, previewed immediately, so I suspect that something is hinky with your ebook. That's something you should look into, given my less-than-stellar results at KOBOBooks.

Anyway, back to my initial comment--remember that half of all eReaders out there may cheerfully ignore your CSS. Another quantity may well have users that just don't like your taste (nothing personal), who will override your font choice.

You need to make sure that the book you make will degrade, or even fail, gracefully. If you are using, say, a font size of something like 1.3ems with a forced line height...well. You can find yourself with a renderer, like ebooks.com, that ignores your line-heights but obeys your font-size settings, or even worse.

You say you made this with Sigil--entirely? Did this, maybe, possibly, come from an INDD reflowable ePUB export, first, which you then possibly refined and edited? Is your font, the font you've called, embedded into the eBook?

Hitch
Hi folks. Sorry about the delay. For some reason (???) I did not get notifications of your replies to my post here. I just came here today to see what's what...and here you are.

Given that this is my first ebook offering in a reflowable format, I probably don't know enough of the ins and outs of it, mechanically, to anticipate all that can go wrong. That said, it looked perfect in my iBooks app. on Mohave and in the Readium reader in Sigil in Sierra. I thought...okay, it works and looks pretty good. But apparently, it's not that easy.

I'm formatting another ebook/print book right now and will be up against the same issue. I think I'll have to look into this deeper.

What concerns me is when a distributor doesn't contact you to say "Hey, this looks like crap —*what happened?" I mean, it's going to their clients via their distribution network. And all I knew at the time was that it passed through their screening process. So I thought...okay, I'm set.

Nope. I'm not.

Anyway, thanks for your feedback. Much to digest.
I posted here because I used SIGIL to create the ebook. Figured I'd start at the source and work my way outward. But I will check elsewhere, too.
Several previews on that site seem to show a sans font, with saner line-height. My guess, the preview trashed your font-family and possibly font-size, but not your line-height; and your chosen line-height is too tight for their fallbacks for the former two. I’d start by unsetting any line-height on p. It’s not that useful to set that anyway, as it’s a common user control.

Edit: just noticed hitch basically already said this above. One of these days I may learn to read.

Distributors don’t alert you to aesthetic issues unless customers complain, because these things are heavily automated so they don’t usually know about them otherwise. Also, previews like this are not really representative of the delivered product, necessarily. Obviously still troublesome in situations like this.
The CSS checks out fine. But I'm seeing it being mangled in a few other online readers now. But it looks fine in iBooks/Calibre/Readium.

P.S. I don't know my way around command line stuff. Was checking out Java 1.8 download — "this turns into that turns into..." instructions made me bail.

I'm a writer and I know my way around html/css. Apparently the online previewers don't, and I guess that's the part I gotta figure out. Reminds me of all the Explorer browser hacks I had to create just to get a website running; still hasn't changed much since 1996 in terms of conforming.
Thanks for the tip. Below is what I had for the line height. My font declaration is "body {font-family:adobe caslon pro;}" so I suspect this is an issue. I just have it on my machine and figured I'd get it to default to that for people who also use it. (Any thoughts on that?)

Anyway, I'll mess with the line height and see what affect that has on the overall appearance of the text. The problem is that I can't get the text to screw up in my own previews/readers, so I have no way to know if it'll be interpreted properly by any problem website that's messing with my code.

In addition, uploading fixes costs money at places like Ingram, so...
Not like Amazon where you can keep uploading for free all day long.

p {
display:block;
margin-top:0.5em;
margin-bottom:0.75rem;
text-align:justify;
text-indent: 1rem;
line-height:1.25rem;

}

p.noindent {
display:block;
margin-top:.05rem;
margin-bottom:.75rem;
text-align:justify;
text-indent: 0;
}
No. I just started with blank html/css files. Having built websites, I feel confident starting with blank files. However, sometimes I employ things that I've previously never used, such as "rem" instead of "em" values. And if it looks good on my computer, I often assume (naively, as I now realize)...that it must be okay.

I always hated that part of web development —*having to look at my work on other computers and seeing sudden gaps and font size differences and god knows what Explorer would do to any respectable website design.