Erik Akers

When I was redesign­ing this site I decided early on that I wanted to do some­thing a lit­tle dif­fer­ent with the fonts and not just use the stan­dard web fonts that gets used over and over. Since font foundries don’t like when their font files get uploaded to web servers to ren­der a cus­tom fonts in a browser, because any­one will a lit­tle under­stand­ing of how the web works can find that file and down­load it. That means that the font file that some­one paid for can now be traded around the inter­net for free. So as design­ers we’ve been pretty lim­ited on what fonts we could use when design­ing web sites and have been left pick­ing from the same 12 fonts for years.

sIFR

sIFR(Scalable Inman Flash Replace­ment) has been around for a cou­ple years as a way to use dif­fer­ent fonts on the web. It basi­cally uses a flash(SWF) file that has been embed­ded with the cus­tom font a designer would like to use and some javascript and CSS to replace the text on a web page with the font from the flash file. I’ve used it a cou­ple of times to mixed results. A cou­ple times it worked great, like replac­ing header tags through­out the site, and times were it flat didn’t work like in list items for menus. I’ve also never had a great track record of be able to cre­ate the SWF file so it would work cor­rectly, some would be pre­fect oth­ers would kinda work, still oth­ers would make the text totally disappear.

I started play­ing with sIFR for this site and since I’m using Word­Press as the back­end, I did a searched for Word­Press plu­g­ins and I found a cou­ple good ones that gave me sIFR font man­age­ment and the abil­ity to add CSS selec­tors so I could get the styling just right. How­ever there were still prob­lems with the sIFR files some worked, some didn’t. Then I found out the Word­Press plu­gin I was using would not show sIFR fonts cor­rectly in Fire­fox run­ning on Mac. Since that was my devel­op­ment envi­ron­ment it made test­ing really tough.

Type­Kit

A few months ago I got an invi­ta­tion to try Type­Kit, I signed up and played with it a lit­tle but noth­ing I ever did made it to a pro­duc­tion web site. So when I started hav­ing trou­ble get­ting sIFR work­ing cor­rectly I decided to take another look at Type­Kit. Type­Kit could not be eas­ier to get setup. When you sign up for a Type­Kit account you are asked for what web­site you would like to use Type­Kit on, then you sim­ply have to copy and paste some sim­ple javascript code into the head sec­tion of your web pages. If you are uncom­fort­able with HTML code and using Word­Press there is a nice Word­Press plu­gin by Amlia Sam­path that will insert the code in your Word­Press header for you.

After you get the javascript code set up you just have to go there the Type­Kit site and pick out what fonts you would like to use. It should be said that to really unlock the power of Type­Kit you are going to have to pay for an upgraded account, unlike sIFR that doesn’t cost any­thing. But with the free Type­Kit account you can have one web­site with two fonts. So you can get use out of it right way, it’s just going to be a lit­tle limited.

Inside of the Type­Kit edi­tor you can also define CSS selec­tors and class to tar­get what­ever HTML ele­ment you want. Of course the more knowl­edge of CSS you have the more cre­ative you can get with the fonts. But even if you just have a basic Word­Press theme that you would like to change the font of say your post titles, you can find the CSS class and add it to the Type­Kit inter­face and it will change the font via the script.

The Deci­sion

For me Type­Kit was by far the eas­i­est way to go and by a long shot. I’ll take copy and past­ing two lines of code over try­ing to get per­fectly work­ing sIFR files any day and the cost wasn’t that big of a deal for the time it saved me. I was going round in cir­cles for three days with sIFR and Type­Kit got what I wanted done in 10 min­utes. Since I wrote the CSS file for this site it made it very easy to tar­get in on what­ever ele­ment I wanted to change. I was so happy with this I left the lit­tle Type­Kit badge on this site even after I upgraded my account, why? Cause I wanted to give Type­Kit an extra shout out.