[1ily]

Originally Posted by JSWolf

Here's what the CSS needs to look like.

.smallcaps {
  font-variant: small-caps;
  text-transform : lowercase;
;

What you do is make sure the span surrounds text you want to be in small-caps. What your screen grab looks like is that the text is in uppercase. small-caps won't work unless the test is in lowercase.

As for the small-cap font you installed in the fonts directory. it won't work for KePub.

The original book had the css settings as:

.smallcaps {
  font-variant: small-caps;
  text-transform: uppercase;
}

I changed the text transform to lowercase, but the font size still appears inconsistent compared to the rest of the text

Here's a snippet of the book's text & the code. The classes are being applied correctly

<p class="body-text">Flags whipped and snapped in the breeze. 
<span class="smallcaps">Unity</span>, one declared in plain, black thread. 
<span class="smallcaps">Strength</span>. The others bore the insignia of the revolution, the same one that had been chalked on Jack’s dance floor: the sun with its searing rays.</p>