CSS: Spans vs Font Families

Question

I'm using Sigil to create epubs and iBooks primarily to preview them, and I have a recurring CSS problem that's driving me nuts. I'm not really sure if it's just a problem with spans or with a variety of nested elements, but here goes...

Imagine a div that has a CSS style specifying font families, either inline or in an attacked style sheet...

<div style="font-family: Arial, Verdana, sans-serif; font-size: 75%;">Text</div>

If I put a span inside that div, it may or may not inherit the div's CSS properties. Most of the time, I think it inherits all the properties EXCEPT font families. If I give the span its own CSS rule, it still doesn't work. In the following example, all the text is relatively small (75%), as it should be, and the text in the span is red. But the text in the span has serifs, when it should look the same as the text surrounding it.

<div style="font-family: Arial, Verdana, sans-serif; font-size: 75%;">Text <span style="font-family: Arial, Verdana, sans-serif; color: #f00;">Red Text</span></div>

I've tried various combinations of inline styles vs style sheets. It seems to be some kind of bug, because sometimes the text inside a certain element will look OK on one page, but the same combination of classes and styles doesn't work on the next page.

Things usually look OK in Sigil, but when I open my project in iBooks, the errors appear.

I should add that I haven't installed any fonts in my epub. About all I'm using are Arial and Verdana, which are installed in my computer and presumably in most people's computers.

Does anyone have a clue what's going on?

Answer 1

Before looking at anything, you might want to look on the available fonts for each device. What are serif and sans serif fonts on different ebook reading systems? It doesn't show iBooks as having Arial or Verdana fonts, so it will be unable to render these fonts. When you edit it in Sigil, chances are that the computer browser already has Arial and Verdana fonts loaded, so that is why it looks different on your computer vs. your device.

To be honest, I am perfectly fine with using "font-family: sans-serif;" or "font-family: serif;" .iBooks and Kindle both have excellent fonts, and users often like to specify a favorite. It can be maddening trying to specify fonts for each device unless you're embedded fonts for ALL devices. (This guide will get you started: https://github.com/JayPanoz/Soma/wiki/How-to-embed-fonts and here's a listing of some google font combinations which you could use for ebooks if you decided to embed the font: http://fontpair.co/ ).

I should stress again that embedding fonts is a complicated deal; I've started trying it myself with my ebooks. I am very taken with Google's Merriweather font for the body text.

Answer 2

I just found the workaround for iBooks.

1. Put your text inside the tag <samp> </samp>. It will give you monospaced font.

2. Add into your css:

samp {font-family: sans-serif;}

And voilà. You get the sans-serif font without embedding etc.