I seem to have found the solution. It was a process, though....
After failing with the typical embedding via the
font-family: "font name"; rule, I tried using
font shorthands. They're not so well known, but seem to work. For example, a font shorthand would look like this:
Code:
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
However, a peculiar thing happened when KDP uploader got the file... the resulting e-book was likewise stripped of fonts, but whereas before the whole
font-family rule would be deleted,
font was deleted only partially. KDP would mangle the CSS in such a way:
Code:
font: italic small-caps normal 13px/150% "", "", "";
Only quotation marks remained of the font names. Obviously, KDP would kill any straightforward font definition.
So, it got me thinking, was there a way to smuggle the fonts by a backdoor of sorts?
The answer was yes, by using the @import method.
You need 2 stylesheets for this. One is your main stylesheet that is linked to the XHTML files directly. From this main stylesheet, I removed all font family rules. I left the
@font-face declarations, though.
Then, I made another stylesheet. I
did not link it to any content file. In it I only put the font-family rules, for my p, h1, h2, and so forth.
The final step was importing the second, unlinked stylesheet into the main (linked) one by @import function. Like this:
Code:
@import url(../Styles/style2.css);
Of course, alter the url location as you need. And, the rule must be put at the very top of the stylesheet, before anything else. From all this, I can only deduce that KDP strips fonts from the linked stylesheet, and any unlinked CSS file shall remain untouched.
And now the Offline Previewer shows the fonts, the Online Previewer also. The font definitions are also not stripped from the CSS of the KDP-generated file. So I can only assume the method works... well, that is until Amazon decides to screw up things again, which I'm sure they're working very diligently on.