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

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:

  1. 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.
  2. 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.
  3. 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.
  4. Text-decoration.  I noticed in Internet Explorer that
    text-decoration:underline;

    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.

TypeKit

I stumbled across TypeKit and did some research into after seeing a lot of popular sites using it.  However, I didn’t like the idea of having my fonts hosted externally and having to configure them on the TypeKit site rather than on my own.  Not to mention that TypeKit costs money, not much, but still it’s not free.  To be honest I didn’t give TypeKit much of a chance, but I really was looking for something JavaScript-free, something I could run on my own site and something that was free!

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.

The good thing about this library was that it didn’t rely on JavaScript.  You’d simple call in an additional stylesheet, which is hosted on Googles server.  This stylesheet returns the font, in different formats based on your browser.  In your CSS file you’d then use the font as any other font.

Font Squirrel

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.

Font Squirrel is an absolute winner for me.  You have your own fonts, hosted on your own site.  It’s free to use.  It doesn’t rely on JavaScript, and can be used on hyperlinks without any issues with underlines, hover states and re-rendering delays.

If you’ve not tried Font Squirrel yet, I’d definitely recommend that you give it a shot

Requirements:

VirtualBox (FREE)
MultipleIEs (FREE)
Windows CD (XP recommended)

About

As a designer or a coder, you’ll reach a point when you want to make sure that your design looks consistent across the numerous Microsoft browsers using your Mac.

There are several ways to quickly check if it looks OK using sites like Browsershots and Adobe BrowserLab, however, those won’t actually allow you to browse the site so you can’t tell if your JavaScript is behaving as it should, your animation effects, hover effects – basically anything that moves.  In this case you’d need to get Windows working on your Mac.  There’s a few ways to do this too, including BootCamp, VMWare, Crossover.

The thing with BootCamp, is that you have to go out of OSX, and boot into Windows – which if you’re like me with over 10 applications open, is really inconvenient.
VMWare and Crossover come at a price, and from experience VMWare does use up quite a bit of resources (maybe it was just me).  So, the best solution I managed to find was: VirtualBox.  It’s a similar program to the others – it lets you install other operating systems on your Mac, but the biggest difference is that it’s FREE, and is quite light too (compared to the others).

How-To

  1. Install VirtualBox
  2. Run VirtualBox
  3. Go through the New Machine Wizard and install Windows XP
  4. Run the XP Virtual Machine
  5. Install IE8
  6. Install IE6 from Multiple IEs

Now, on your XP Virtual Machine you have IE8 and IE6, “but what about IE7?” you ask.  Well, Internet Explorer 8 has really handy developer tools which let you emulate IE7 (as if you were running IE7 itself).  To use it, just open IE, and select “Tools” > “Developer Tools”.  On there, you’ll notice the “Browser Mode” option, in which you select IE7!

Conclusion

So basically, all you need to get IE6, IE7 AND IE8 is VirtualBox and a Windows CD – Windows XP is highly recommended because it’ll let you run all 3 Internet Explorer versions on the same OS!  Most of the tools are free, and an XP CD can be bought pretty cheap from the net too if you don’t already have one.

Extra

  1. When testing sites, I normally upload them to a development site first – if you want to test a site on localhost such as MAMP or XAMPP on your Mac then I’ve found that visiting: http://10..0.2.2 in your virtual machine will work.
  2. When I first installed VirtualBox, the virtual machine would not connect to the Internet.  Now I’m no expert in Virtualization, but I found that by right-clicking my XP machine in the VirtualBox application window, selecting “Settings” and under “Network” setting “Adapter 1” to “PCnet Fast III (Am79C973)”, and attached to “NAT” seemed to get things working for me.

I hope this is useful to you!  For me it’s the best way to test across multiple browsers and it worked out free seeing as I had my XP CD to hand.

AutoTrader is probably the biggest resource available for when it comes to car sales around the UK. Their website has never been too bad, and people were able to use it nicely, without much hassle, and no doubt great bargains were had, and huge profits made by utilising the AutoTrader website. That was until, they brought in their new “Beta” design.

If you’ve checked recently, AutoTrader have updated their website with a new look, currently tagged “Beta”. Now I know a lot of people are complaining that the new site doesn’t work properly – including problems with how it looks, and other problems such as the JavaScript only working sometimes.

The thing with JavaScript is – it’s always good to use it unobtrusively – that’s to say make a website that works without JavaScript, but then improve the experience for people who have Javascript. Don’t make it so that you block off a large part of your userbase just because they have JavaScript disabled. In AutoTraders case, obtrusive JavaScript is only the smaller issue….

Mozilla Firefox is the second most popular web browser in the world, and AdBlock Plus is one of the most popular addons for Firefox. Now here’s a couple of screenshots comparing how the AutoTrader site looks for users with AdBlock, and for users without it:

Adblock Enabled

Adblock Enabled

Adblock Disabled

Adblock Disabled

As you can see, people with advertisements disabled received a very limited view compared to people without it. Whether or not this is deliberate we can’t really say, but it’s definitely something that should not be overlooked. When I personally visited the web page (my default browsing is Firefox with AdBlock) I saw masses of whitespace and thought “Wow! What an eyesore!”. The whole site looked hideous, with just so much white and bright blue text stuck inbetween.

No doubt AutoTrader are being plastered with complaint emails, but this is a mistake that should never have happened. In the meantime, we can all learn a few lessons from this:

  • If you have a new site that you want to test, DONT launch it to the general public. Have a select group of testers who can opt-in to test the Beta version, provide feedback, and only when you know that everything’s working do you make it available to the mass-public.
  • Use unobtrusive JavaScript
  • Don’t rely on adverts to make your site look right