Guessing font availability with Javascript

👉 Whoa! Please note that this post is 14 years old. The views expressed within might have become outdated.

Recently I wanted to use an uncommon font in a website, but the site was too image-rich to use sIFR, (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.

The problem

The font in question was Copperplate Gothic Light. I had chosen the classic Times New Roman 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 Serifs.

In order for me to make Times look like Copperplate, I had to at least display the text in small-caps.

This is where the first obstacle presented itself: using CSS, I cannot specify a different font-variant for my number one choice than for my fall-back font.
Consider this piece of CSS:

h2 {