One the most common things I’m required to do on any website build is to use a custom font. This post discusses the various libraries that I’ve tried and tested, and which library I prefer the most.
Cufon was the first library I was recommended and blindy started using without researching into other options. It was dead simple to use – just include the Cufon library, convert the font file to a Cufon Script and include that too, call Cufon on the web page and away we go.
However, Cufon has a number of drawbacks, and the biggest issues for me were:
- Links in Internet Explorer. As Cufon replaces text with images, instead of an entire block of text within a hyperlink being clickable, only the actual letters were clickable, and clicking anywhere inbetween wouldn’t trigger the click.
- Hover states. Cufon supports hover states via an additional option in the configuration. However, there’s a slight delay when you hover as Cufon has to load in the hover states images whenever you hover.
- Dynamic text. If you’re loading in content via AJAX, and need Cufon applied to certain elements, then you need to reload Cufon whenever new content is loaded in.
- Text-decoration. I noticed in Internet Explorer that
on hyperlinks wouldn’t work and the underline would never show. The workaround was applying a bottom border instead.
Due to all these issues, I set off on a hunt for an alternative to Cufon which wouldn’t cause me any of these issues.
Google Web Font API
There’s Google Web Fonts API, which was launched early 2010. I was really excited when I first heard the news about this, however, it turned out that it didn’t really have many fonts on offer at the time. It seems that they’ve added a lot more fonts in the meantime, but once again I encountered font cross-browser compatibility issues on some fonts; Internet Explorer simply wouldn’t render it, or the line spacing would be wrong, the characters overlapped each other and various other issues which I just didn’t have the patience to fix.
As was about to rebuild the Cube Websites site this summer (2011) I decided to search again to see if a new font library had appeared, and it was then that I stumbled across Font Squirrel.
The first thing I spotted was the logo saying “100% free for commercial use”, and I was already off to a good start. On their homepage, there was also a long list of fonts, all of which looked pretty impressive.
Next, I investigated their integration method; it was something called Font-Face Kits. Basically you download a Kit for the font you want to use (or generate a kit for a font not on their website). Each kit contains sample HTML code, the CSS you need and your font in various formats (each specific to a different browser). Out of curiousity I downloaded a Font Kit and inspected the contents. It contained 4 variations of my font file, a stylesheet and a sample HTML page to preview the font.
I ran the preview in all my browsers, and to my surprise the font rendered perfectly in all of them. To use it on a website I just copied the font files into my site, copied across their CSS and I was good to go.
If you’ve not tried Font Squirrel yet, I’d definitely recommend that you give it a shot