Face the Face
I’ve been playing with new features in html5 recently – there are lots of things getting a bit of media coverage, but the wider support of embedded fonts really caught my eye. By including an @font-face entry in your css file, and the appropriate font files on a server somewhere, you can get really nice typography, without needing to use flash-based hacks like sifr, or newer javascript hacks like cufon
(Note, on the usual question of browser support – check out the webfonts wiki page, or the nifty “When can I use” page. The short answer is, @font-face is supported in *all* desktop browsers, as long as you can get a font in the right format.)
Anyway, the point of this post is not to describe how @font-face works – you can find that information all over the web, and there are many good free (and non-free) fonts out there.
But I did want to point folks to Tim Brown’s Web Font Specimen, a nifty way to look at web fonts. I found this when trying to wade through a pile of free fonts, looking for nice ones. The only problem was, it needed editing by hand to change the font specimen – too much work.
“That’d be easy to automate with Sinatra” I thought, so I went looking on github to see if anyone had done it, and found the web font specimen Sinatra mini-app, by Robert J Whitney. Which was neat, but still involved editing a sass file to specify the font you want to view.
This wasn’t quite what I wanted – (a) I’m not a big fan of Sass, I prefer something closer to CSS like Less, and (b) it only showed a single font, and needed configuration to change fonts, while I wanted to browse several.
So I forked it – see my shiny new Sinatra app on github.
It actually ended up being more of a reboot than a fork – I undid a pile of other people’s hard work, and reverted the sass and haml files back to their original css and html, then added some logic to scan font directories dynamically – all the details are in the code and the readme.
But this is how it looks, once you install some fonts and load up the main index page:
Click on a font, and it takes you to a the Specimen page – this is basically Tim Brown’s original page, unmodified (except for a ‘back’ link):
… And that’s about it. I’m probably not going much further with this – it’s pretty handy as-is, for browsing your local font files and seeing what looks nice on different browsers. If anyone wants any changes, feel free to hassle me – or fork the project yourself!
