greenideas

Here’s an annoy­ing lit­tle bug that man­i­fests when you try to set a CSS font-variant prop­erty (say, small-caps) with a font that doesn’t pro­vide the requested vari­ant. For instance, here is some text in League Gothic, pulled in via @font-face:

League Gothic doesn’t have its own small caps vari­ant. So what hap­pens when you tell the browser to give you one any­way? Here it is with font-variant: small-caps applied as ren­dered in Firefox:

So far, so good. But here’s what you get when you add small caps to League Gothic in Webkit:

Whoops! Webkit-based browsers (I tested this in Safari, Webkit Nightly, and Chrome for OSX), when they don’t find the spec­i­fied vari­ant in the font itself, just go to the next font in the stack. In this case, it’s the browser’s default font.

So which behav­ior is cor­rect? The CSS2 spec essen­tially left it up to imple­men­tors to decide whether or not they would dynam­i­cally scale the font to imple­ment small caps. CSS3 removes the ambiguity:

If a gen­uine small-caps font is not avail­able, user agents should sim­u­late a small-caps font, for exam­ple by tak­ing a nor­mal font and replac­ing the low­er­case let­ters by scaled upper­case char­ac­ters. (CSS fonts mod­ule level 3)

Although a typo­graphic purist might take issue with this behav­ior (Bringhurst rails against the prac­tice of “rolling your own” vari­ants by dynam­i­cally scal­ing the exist­ing face), this is what the spec says browsers are sup­posed to do. And in fact, this is what Fire­fox does. Webkit, on the other hand, checks each font in the stack in order until it finds one that sup­plies the desired vari­ant. As in the exam­ple above, if there’s noth­ing else in the stack, it will fall back on the browser’s default font.

Unfor­tu­nately, there aren’t really any workarounds for this bug. But it should serve to remind you yet again that it’s super-important to put a good deal of thought into your font stack. Always try to build a stack where all of the fonts are as sim­i­lar as pos­si­ble, so when some­thing like this hap­pens, your design doesn’t break too badly.

For ref­er­ence, or if you’d like to see how your browser of choice han­dles these cases, here are some test cases together on a sep­a­rate page.