Recently I wanted to use an uncommon font in a website, but the site was too image-rich to use <a href=”http://www.mikeindustries.com/blog/sifr/”>sIFR</a>, (loading time made for an uneasy user experience).
I decided to add the font anyway in my stylesheet, and provide a “lo-fi” experience, for people who didn’t have the font handy.
The lo-fi version however, should mimic the style of the uncommon font as good as possible.
Sometimes, though, that’s easier said than done.
<hr>
<h3>The problem</h3>
The font in question was <a href="%E2%80%9Dhttp://en.wikipedia.org/wiki/Copperplate_Gothic%E2%80%9D">Copperplate Gothic Light</a>. I had chosen the classic <a href="%E2%80%9Dhttp://en.wikipedia.org/wiki/Times_New_Roman%E2%80%9D">Times New Roman</a> as my backup font (playing it safe), but Times in no way mimics Copperplate.
The only similarity between the two fonts is the fact that they’re both <a href="%E2%80%9Dhttp://en.wikipedia.org/wiki/Serif%E2%80%9D">Serifs</a>.
In order for me to make Times look like Copperplate, I had to at least display the text in <code>small-caps</code>.
This is where the first obstacle presented itself: using CSS, I cannot specify a different <code>font-variant</code> for my number one choice than for my fall-back font. 
Consider this piece of CSS:
<pre><code>h2 {
	font-family:
</code></pre>