FLIR, Cufon, Typekit, or SFIR: Breaking Away From Web-Safe Fonts
If I had to subtitle this post, I would probably make some sort of a silly joke like “Georgia on my mind” or “Helvetica? I barely even know you” or something like that, but instead I want to jump right into the fun stuff.
Back when the web was young and you were “likely to be eaten by a grue” (ok, maybe not that far back, but back when the term “world wide web” had just been coined”) there was one font that reigned supreme: Terminal. After graphics invaded our desktop machines, Microsoft created the “core fonts for the web” that allowed users to get the same fonts on every machine (allowing for at least some sort of consistency when you build a website).
The project flopped because of EULA problems, but it did give us a sort of standard font set that we use for the web:
- Arial/Helvetica
- Times New Roman
- Georgia
- Verdana
- Tahoma
99% of websites have a combination of one or more of the fonts listed above. There are others, but they are machine specific, such as Myriad Pro (Mac), but for the most part, until recently, you couldn’t branch out from those specified fonts.
Lately, however, a few services have appeared that allows you to take different fonts and use them at your will to replace boring, web-safe fonts with more exciting choices.
1. sIFR
Scalable Inman Flash Replacement was developed by web-pioneer Shaun Inman as a way to easily replace one font with another using a combination of Flash and JavaScript. The first obvious drawback to sIFR is the word “flash”, which means that iPhones can’t view the text. Flash blockers also have an issue with replaced text. The other problem is a special sIFR font file must be generated/created to use with the script. It’s a viable method, but may be outdated by other methods that have come along in recent times.
2. FLIR
FaceLift Image Replacement is meant as a JavaScript only replacement technique that takes the flaws from sIFR and removes them. The upside is a fantastic font image that can be viewed on all devices. It also uses real font files, not flash generations, to do its job. The downside is that some fonts look jagged and pixilated, but most fonts look pretty good.
There’s a WordPress plug-in for FLIR you can download to make the process easier.
3. Typekit
Typekit is, by far, the easiest to set up. You create an account, select the fonts you want to embed (and what CSS calls to use) and the one line of JavaScript takes care of the heavy lifting for you. The downsides? Limited font selection, and the better accounts cost money to get access to (not much mind you, and even font foundries have to get paid somehow).
4. Cufon
Cufon is my new favorite in the race to replace fonts. Sure, it does require a generator file, like sIFR, but it’s not a flash file – it’s a JavaScript that runs. The set up process is fairly easy: simply give the font a “font-family” attribute, generate the script, attach to a stylesheet, and then enter your CSS as normal, using the font family attribute to call the font. Sizing, italics, weight; everything is taken care of by the JavaScript.
Also, the WordPress plug-in for Cufon makes it super easy to set things up effectively.
In conclusion…
Cufon is by far my favorite because it looks nice, is easy to use (if not a little harder to set up, but it’s a caveat I’m willing to live with), and does its job well. Regardless, one thing to remember: only use fonts you have purchased the license to, because those guys work hard and deserve to be paid for their fantastic job. Now, go out there and find some cool fonts to use!