title: CSS fallback for OpenType small caps
body: <p>I'm working on a site where small caps are important: setting the text of the Bible. In the Old Testament the name of God is transliterated as <code>Lord</code> but in small caps—not <code>LORD</code>. However, the state of OpenType small caps support at the moment is… less than optimal. Safari (even up through Safari 8 on Yosemite, from which I am typing this) still doesn't support the <code>-webkit-font-feature-settings: 'smcp'</code> option, and a lot of the hits for this website will be coming from mobile.</p>
  
  <p>Unfortunately, "graceful degradation" is problematic here: if you specify both <code>font-variant: small-caps</code> and <code>font-feature-settings: 'smcp'</code> in a browser that supports the latter (e.g. Chrome), the <code>font-variant</code> declaration overrides it, so the horribly ugly old-style version still comes into play. (Note: this is as it should be per the <a href="http://www.w3.org/TR/css-fonts-3/#feature-precedence" rel="noreferrer">spec</a>: the <code>font-variant</code> declaration has a higher priority than the <code>font-feature-settings</code> declaration). Given the current implementations of <code>font-variant: small-caps</code>, though—shrunken capitals rather than actual small capitals—the result is that using <code>font-variant: small-caps</code> realists in not-so-gracefully degrading <em>everyone's</em> reading experience.</p>
  
  <p>In the past, I have exported the small caps as a distinct webfont and specified them directly; see <a href="http://www.chriskrycho.com/2014/learning-qml-part-1.html" rel="noreferrer">this post</a> for a simple example: the first line of each paragraph is specified that way.</p>
  
  <p>While I <em>can</em> do the same thing here (and at least in theory could deliver a pretty small typeface, since I really only need three characters: <code>o</code>, <code>r</code>, and <code>d</code>), I'd prefer simply to enable sane fallbacks. As noted above, however, that's not possible. I am <em>open to</em> but would very much prefer to avoid server-side solutions (browser detection, etc.) as a point of complexity that is better to minimize, especially given how rapidly browsers change. How else might one solve this problem, and especially are there existing solutions for it?</p>
  
  <p><strong>Edit:</strong> clarifying based on comments—in the future, <code>font-variant: small-caps</code> will handle this nicely, as per the spec it should display a small-capitals-variant of the typeface if the typeface supplies it. However, at present, <em>no browser supports this</em> (at least, none that I can find!). This means that instead, they all render fake small capitals simply by scaling down actual capitals. The result is typographically unpleasant, and unacceptable on this project.</p>