Now for something different: Web Fonts

Sunday, 11th May 2014

You may wonder just how I added these custom font types. I’m the last person to believe your choice of font should affect the message you wish to convey. Alas Web designers love custom fonts and often spend countless days wrestling with various technical solutions to reproduce the graphic deisgner’s wishes on all browsers. Back in the day, they had to resort tricky Javascipt libraries such as Cufon or, heaven forbid, Flash-based solutions such sifr. These solutions could actually crash some browsers. Some will even buy special fonts and then waste more hours testing them on different browsers and devices. Luckily with Web fonts those days are over.

As a backend Web developer (I do all that Geeky database and data-mining stuff in my day job), I'd be very pleased if everyone could just make do with Courier, ideally using a text-only browser like the venerable Linx. However, now thanks to openfontlibrary.org, you can easily jazz up your site. All the fonts here are available in “font packs” to support all modern browsers. If you combine this resource with the free FontPrep application (sadly available only for Mac) or a Web service such as everythingfonts.com or freefontconverter.com , you can even support older versions of IE.

FontPrep and everythingfonts.com will even generation the @font-face CSS for you. Then just reference your new custom font in your stylesheet by applying font-family: MyCustomFont, Helvetica, Ariel, sans-serif; either to the body tag or a specfic region or set of tags. It is that simple.

If you fancy creating your own font, you can download and install the free BirdFont app. This is available for Windows, Linux and Mac. It seems to import best from the newer OTF font types and let you import SVG files for individual glyphs.

I then resorted to a little javascript magic to load a random custom font on each page load. Doesn’t change the meaning of anything I write and you can always change it in the accessibility toolbar on the right.

+