Mobigen Sans-serif generic family in mobigen generated .mobi files

[Symmetria]

Hi everyone.

I am working on a book that needs to have some of its sections displayed in sans-serif font.

I have set the following rule for these kind of sections; nice and generic.
{font-family: sans-serif;}
The epub version of the book works as intended.

When I preview the file in the Kindle Previewer, however, everything is in serif font (except for some other parts of the book, that needed to be in monospace({font-family: monospace;}) , which are, curiously, displaying correctly)

What is the deal with kindlegen generated .mobi files and the sans-serif font family?
Do they simply not work or is there some trick to make the kindlegen not disregard the CSS rule when it compiles the book from .epub?

.mobi files in question are generated using the up-to-date Kindle Previewer's built in kindlegen functionality.

Thanks

[RbnJrg]

Originally Posted by Symmetria

Hi everyone.

I am working on a book that needs to have some of its sections displayed in sans-serif font.

I have set the following rule for these kind of sections; nice and generic.
{font-family: sans-serif;}
The epub version of the book works as intended.

When I preview the file in the Kindle Previewer, however, everything is in serif font (except for some other parts of the book, that needed to be in monospace({font-family: monospace;}) , which are, curiously, displaying correctly)

What is the deal with kindlegen generated .mobi files and the sans-serif font family?
Do they simply not work or is there some trick to make the kindlegen not disregard the CSS rule when it compiles the book from .epub?

.mobi files in question are generated using the up-to-date Kindle Previewer's built in kindlegen functionality.

Thanks

The ".mobi" file generated by Kindle Previewer contains two types of files: a .kf8 (in order to be read for the modern models of Kindles) and a "properly" .mobi (the old kind of mobi) in order to be read for Kindle DX and the older Kindle devices. When in Kindle Previewer you enabled the Kindle Fire and Kindle Paperwhite preview, you are watching the ".kf8 part" of the .mobi file AND YOU SHOULD SEE the sans-serif font; on the other hand, when you enable the Kindle DX preview, you are watching the ".mobi part" of the .mobi file AND HERE YOU CAN'T HAVE the sans-serif font. Probably you are previewing your eBook with the Kindle DX preview; try enabling Kindle Fire or Paperwhite and tell us if you can see the sans-serif font.

[DiapDealer]

There's only so many generic font-families that are supported with kindle devices (out of the box). Monospace or tt will work on all devices (mobi or KF8), but I don't know about any others for sure. You may have to embed a font to get anything else to work (and even then it will only work on devices/apps that support the KF8 format).

[Symmetria]

Originally Posted by RbnJrg

The ".mobi" file generated by Kindle Previewer contains two types of files: a .kf8 (in order to be read for the modern models of Kindles) and a "properly" .mobi (the old kind of mobi) in order to be read for Kindle DX and the older Kindle devices. When in Kindle Previewer you enabled the Kindle Fire and Kindle Paperwhite preview, you are watching the ".kf8 part" of the .mobi file AND YOU SHOULD SEE the sans-serif font; on the other hand, when you enable the Kindle DX preview, you are watching the ".mobi part" of the .mobi file AND HERE YOU CAN'T HAVE the sans-serif font. Probably you are previewing your eBook with the Kindle DX preview; try enabling Kindle Fire or Paperwhite and tell us if you can see the sans-serif font.

I am aware of the fact that ".mobi" files generated from kndlegen actually contain other files (as a side note, I thought it included one more file, the original, no?) for backwards compatibility reasons.

I am not aware however which of the devices available in the Previewer are supposed to be new (as in "use .kf8") and which are old

To answer you, I tried all of them and since sans-serif works in none of them I just assumed it works to neither new or old.
Just to be sure we are on the same page (no pun intended) here is the list of the available devices I see:

-Kindle e-ink
|-Kindle Paperwhite
|-Kindle DX
-Kindle Fire
|-Kindle Fire HD
|-Kindle Fire HDX
|-Kindle Fire HDX 8.9"
-Kindle for iOS
|-iPhone
|-iPad

As a side note, monospace is not working on Kindle Paperwhite.

[Symmetria]

Originally Posted by DiapDealer

...You may have to embed a font to get anything else to work (and even then it will only work on devices/apps that support the KF8 format).

..ok, so a "trick" for merely having sans-serif. I will try this if no other alternative comes up, thanks.

[RbnJrg]

Maybe you are doing something wrong. I used this code without any issue:

h1 {
   font-family: "Arial", sans-serif;
   text-align: center;
   margin-bottom: 1em;
}

h2 {
   width: 70%;
   font-family: serif;
   font-style: italic;
   text-align: center;
   margin: 0 auto 1em auto;
   padding: 1em;
   border: 7px double black;
   -webkit-border-radius: 25px;
}

p {
   text-indent: 0; 
   text-align: justify;
   font-family: serif;
}

.boldss {
   font-family: "Arial", sans-serif;
   font-weight: bold;
}

and:

<h1>This title in sans-serif</h1>

  <h2>Subtitle in serif</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, <span class="boldss">this text in bold sans-serif</span> massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</p>

This is how it looks in Kindle Previewer (Kindle Paperwhite):



This is how it looks in my K4NT:



Below you can check the respective epub.

Regards
Rubén

[Symmetria]

Originally Posted by RbnJrg

Maybe you are doing something wrong. I used this code without any issue:

h1 {
   font-family: "Arial", sans-serif;
   text-align: center;
   margin-bottom: 1em;
}

h2 {
   width: 70%;
   font-family: serif;
   font-style: italic;
   text-align: center;
   margin: 0 auto 1em auto;
   padding: 1em;
   border: 7px double black;
   -webkit-border-radius: 25px;
}

p {
   text-indent: 0; 
   text-align: justify;
   font-family: serif;
}

.boldss {
   font-family: "Arial", sans-serif;
   font-weight: bold;
}

Thanks Ruben, that helped, I managed to pinpoint what the "mistake" was!

Apparently, you must specify at least one font for sans-serif to work. If you just use the generic
{font-family: sans-serif;}
, as I did in my case, it gets disregarded.

After seeing your code, I specified Arial as the to-go-first font, and now sans-serif is working.

At least that's how it works on the Previewer.

Out of curiosity, I see you have an actual device, so would you mind testing whether just declaring {font-family: sans-serif;} would work on that?

Thanks again

[RbnJrg]

Originally Posted by Symmetria

Out of curiosity, I see you have an actual device, so would you mind testing whether just declaring {font-family: sans-serif;} would work on that?

I did the testing you asked and with "font-family: sans-serif" in Kindle Previewer only worked with Kindle Paperwhite preview; also worked in my K4NT. So, with "font-family: sans-serif" it seems that only doesn't work in Kindle Fire (and of course, in Kindle DX and older Kindle devices that don't support .kf8)

Thanks again

You are welcome