Font Unstack
Earlier this week, I wrote about the limitations of current CSS to bind font styling to the availability of typefaces. I mused that a clever person might develop a solution using Javascript.
And there’s the problem with CSS, right there. Different typefaces, even common ones, that have been designed with different x-heights, need different amounts of line-height. Calibri less than Verdana and different again to Arial or Helvetica. But CSS does not provide the facility to specify a varying line-height if a font in the stack is not installed, as it retains the same set line-height value for all typefaces specified in the font-stack.
What are your options today? Perhaps a Javascript solution such as FontAvailable that can test for font availability. If you’re handy with the jQuery, you could then append a class based on the result.
In response to my call out, Phil Oye has done just that by writing FontUnstack, a jQuery plugin to query your font stack and on detecting the first available installed font will append a class to any element.
FontUnstack is a jQuery plugin that provides a workaround for the CSS/browser limitation of not knowing which typeface in a CSS font stack is actually used on the client-side. It simply adds a class with the name of the installed font to your desired HTML element(s). From there, you use CSS to do something interesting with that new class name.
I'll be experimenting more with FontUnstack on this site in the next few days before I make it part of my every toolkit. I'll also contribute a set of example pages for the project. Until then, grab the FontUnstack code for yourself.
Oh happy day.