Saucy – use any font on your website

Fonts can be a developer’s nightmare if they’re not one of the ones installed on the user’s machine. There are alternatives such as sIFR and typeface.js but they’re quite resource intensive – we had to remove sIFR for that reason.

What some people end up doing is using images, cutting them up manually; quite a time intensive way of doing things. Saucy is Rails plugin developed by Jonah Fox to generate the text server side, using RMagick, so you can use any font you want.

<%= saucy_tag "h2 tag",
                :style => {
                    :font => { :size => 100, :font => "bauhausl.ttf"  }
                },
                :tag => :h2,
                :html => {:id => "myid"} %>

I’ve recently been extending Saucy to support Sprites, so you can do rollover images easily. It’s as simple as this:

<%= saucy_tag("I am a red/blue sprite",
                  :style => {:font => {:color => 'red'}},
                  :hover => {:font => {:color => 'blue'}}
                ) %>

You can get Saucy here until Jonah merges the changes.

Next up is rounded corners (don’t even mention drop shadows) ;)