Webfonts – web design gets proper typography

Well, maybe not completely proper typography, there’s still a way to go to have full control over our type, but webfonts are a really good start.

When this version of my site was designed I knew I wanted to use the Delicious font for the header and post titles. For the header I could have pre-rendered the whole thing as an image file, but that’s not an option for post titles. Two other options were sIFR and cufon. sIFR was out very quickly as it doesn’t come well with the linux versions of flash – BBC Good Food uses it and the titles are unreadable on linux, just appearing as a white box.

Cufon was better – it uses javascript to re-render each letter individually and automatically. It gives a small flash of un-formatted text but a fairly good rendering of the font. It was a great solution in early 2009, but the world has moved on (thankfully!) Over the past couple of years, using the @fontface to embed fonts has gone from theoretical to an actually working solution – JonRogers.co.uk no longer uses cufon, the fonts you see are downloaded from the site.

Making it easy enough to implement on New Year’s Day morning is the Font Squirrel @fontface generator. First thing to check is that you have the correct license for the font you’re using –Delicious says that with a link back it’s fine. You then upload the font files (.otf files in this case) and it works the magic, giving you a download that includes the css file to link to and all the different versions of the font file you’ll need for different browsers (from iOS to the big blue e). Link, change a couple of lines in my own stylesheet to name the fonts correctly and we’re done!

I know this is something that’s developed over 2010 and lots of people in the business have already written about it, but it’s nice to catch up and be able to actually use proper real fonts on my website!