Less CSS is a great way to develop your stylesheets for websites.  It lets you create nested rules, specify variables, functions and so much more.

To use Less on a website you have 2 options:

  1. Use JavaScript to compile on-the-fly.  This isn’t really recommended as you’re now relying on JavaScript for your website to look the way it should.  It also creates additional overhead as your page needs to load in the JS file, load your less stylesheet and finally render your stylesheet by parsing it through the Less Javascript library.
  2. Compile your Less stylesheet into CSS, and include is as a normal stylesheet.

The compilation method is obviously the best option as you get the benefits of using Less, and then using it as any other CSS stylesheet.

Whilst the compiled method might be great for when you’ve finished developing, during development you’d still have to use the Less JS method or compile your Less file into CSS each time you make modifications, which can easily become tedious.

This is where SimpLESS comes in.  SimpLess is real-time Less compiler.  You simply drag and drop your less file(s) into the app, and it recompiles your Less file into a CSS file every time you save it.

This app is totally free, open-source and available on Windows, Mac and Linux. As well as doing the compilation, it minifies your CSS too saving you precious bytes during HTTP requests.

Download SimpLESS
Fork SimpLESS on Github

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