SifrHelper is a Ruby on Rails plugin that makes using sIFR 2.0 rich font technology as simple and easy as a line of code. Get it, add a few lines of code to your layouts, add a font file or two, and enjoy the world of rich, dynamic fonts!
If you're looking to get started, you can find the latest release of SifrHelper here:
The RubyForge page for this project, with help forums, is here:
I've built my share of websites over the years, and one problem I keep running into is how to use non-standard fonts. For body text, Arial, Verdana and co. are fine, but for header text, they're dull. So, I've always used Photoshopped images containing the text I wanted styled. This is tedious, but works fine. Unless you want to select the text. Or if you're using a screen reader. Or if you have dynamic text. Or the user has their font sizes set differently. Or they want to print. Ahem.
Like a sample?
OK, so what's SifrHelper?
Installing the plugin
First, you'll need to install the Engines plugin. More info here: http://rails-engines.org
To install the Engines plugin, use the following from your Rails project root dir:
script/plugin install engines
script/plugin install http://svn.rails-engines.org/plugins/engines
Once that's done, you can install the SifrHelper plugin similarly:
script/plugin install svn://rubyforge.org/var/svn/sifrhelper
If you're running production, you'll need to bounce the server, otherwise, you should be ready to go!
Here's a walkthrough of using SifrHelper to use some a font on a page:
<html> <head> <%= sifr_head_generator -%> </head> <body> <%= @contents_for_display -%> <%= sifr_body_generator -%> </body> </html>
Now, we find the text we want to change (in the layout, or in any view using that layout), and add a call to sifr_replace to tell the helper to do the switch. This assumes we have a font file named xpressive.swf installed already.
<h1 class="xpressive">I like new fonts!</h1> <% sifr_replace('.xpressive',:xpressive) %>
That's it! It's simple and concise. Note that you can use a single sifr_replace call to replace any number of items. Use any CSS selector, including comma-separated lists of selectors like so:
<% sifr_replace('h1, h2, h3',:xpressive) %>
Fonts, and how to generate and install them
sIFR uses Flash-embedded fonts to do its magic. There are a number of ways to obtain these .swf files. The best is to generate them yourself using Flash MX or similar product. Read the sIFR library docs for more information on this, including how to protect commercial fonts.
Another easy way, especially for testing, is to grab one of the font files in my font repository. These are royalty-free fonts that I've made for my own use.
Finally, you can try this font generator. I haven't used it, but it may work for you - note that you should use the latest sIFR version (2.0.6 as of this writing) to get security and usability fixes included in recent versions.
Once you have a font file, name it something useful and add it to your Rails public/fonts/ directory. That's all it takes! If you're using the engines-based version of the SifrHelper plugin, you can go to http://www.yourdomain.com/sifr/ to see the new font listed.