davemcnally.net

We all know how using a custom typeface online can be a pain sometimes and there are multiple options out there to us although none of the available ones are perfect. My aim here was to gather some of the more popular ones and run through their pros and cons to determine what I believe is currently the best option. Read on for my findings...

Before we get started, I just want to point out a couple of things relating to my tests to let you know how they were conducted and what was covered. For browser testing, I covered Firefox 3, Safari 4 and Internet Explorer 8 back down to 6. Earlier versions of IE were not covered as they are not used by many people anymore and other browsers were not covered due to their minority market shares. So for results, I point out that some are compatible back to IE6 but that doesn’t necessarily mean they will work in IE5 and earlier or some other modern browsers. It wasn’t a comprehensive testing environment but more of a brief overview of what we can use.

For the testing pages I set up, things were kept as simple as possible and besides the required styling for each option, I never altered much to give an accurate representation of how each of the options handles sizing, line heights etc. These are handled differently between each of them and so what you see is the default sizing for each technology.

Sifr

The first on my list and perhaps the most well known was sIFR which has been around for a while now and has probably been used the most. The fact that sIFR requires visitors to have the flash plugin installed tends to put a lot of people off using it but perhaps even more so is the attached stigma that it is difficult to set up and use. There are some great tutorials out there to help with getting sIFR up and running in no time. As with the other options out there, your text will degrade nicely back to the HTML alternative if the needed technologies aren’t available to visitors so I wouldn’t worry about that either. Something to note is that if you plan on using custom fonts with sIFR, you will need to have Flash installed on your system to create your files to begin with unless your chosen typeface has already been handled and uploaded to somewhere such as sifrvault where you can freely download SWF files for your projects.

On the plus side, sIFR offers some functionality that the others do not. Text is fully selectable just like it was HTML text and can be copied in the same way too. Hover states for links are fully supported without having to implement any hacks or plugins and it is supported right back to IE6. Load times are quick enough and text can be hidden until ready so we don’t see any flickering upon page loads. sIFR also gives ample spacing between headings and other elements whereas the others were not so liberal with the breathing room. Perhaps the major plus of using sIFR is the availability of fonts we can use and licensing options out there. There are configurations within sIFR to lock the files down to our own domain for more safety too. Take a look at F.A.Q number 20 from Hoefler & Frere-Jones as an example of allowed uses and their stance on sIFR. So whilst some require an additional license, the point is that there is currently one available and we can use the technology already.

Cufón

Having recently come across Cufón, I was interested to see how it worked and whether or not it was a worthy alternative to sIFR as people had suggested. The first thing I noticed about Cufón was the time in which it took to get up and running. Set up time is kept to a minimum and within a couple of minutes, it was working. Besides the ease of use, the only bonus I’ve found to using it over sIFR is the fact that it doesn’t require Flash to run. It is also fully compatible down to IE6 which is always a plus.

On the downside, there are a couple of areas where it is lacking although fixes and improvements are being worked on. Hover states for links are not yet currently fully support although there are fixes in place that are being tweaked. A big downside is the fact that text is not selectable so copy/pasting is out of question. Licensing is where we run into issues, as with the majority of our options, Cufón requires that we have the licensing available to upload fonts for embedding as it is part of the creation process and our choices are currently limited. Licensing for Cufón is something being worked on and you can read more about that in Cameron Moll’s article: Exploring Cufón.

Facelift

This was another I had not used before but had heard a lot about. Facelift, or Flir as it is often is called is another technology that does not require flash to run. Load times with Facelift were fairly decent but it took a bit longer than the others to configure and get it working properly and it feels a bit bloated compared to some of the others.

It is also supported back to IE6 and hover states are working with it. Text selection is limited to alt text at the moment but it’s better than nothing and should be OK if you keep your markup up to scratch. Licensing is an issue here too though; fonts are required to be uploaded in their untouched states and so this opens the doors to possible theft.

Typeface.js

This had been in my bookmarks for a while but I had not gotten around to testing it out. Support back to IE6 is covered with Typeface.js and it was quick to set up too. Hover states for links are not yet supported although it is a planned feature. Improvements are being worked on for text selecting as this only currently works in selected browsers and highlighting is not supported yet.

Spacing has handled particularly well with Typeface and it was the closest alternative to the HTML text when it came to default line heights and padding. Performance was good with the page not taking much time at all to load the replaced text. Licensing is where we are let down again as you must have rights to upload and convert your font ready for use. As with Cufón, licensing here should be easier to obtain to work on as we are not directly embedding the font on our pages which reduces risk of theft but there are still questions surrounding how secure of an approach this is.

Font-Face

Although current usage is limited here, @font-face is clearly the way forward. No extra technologies such as JavaScript or flash are required in order to use it as your text is just rendered as standard HTML text. This also has a significant boost on performance as we don’t have to wait for scripts to be executed. As it is just using regular text, there are no problems with hover states or selecting as experienced with the majority of the others.

Browser support isn’t as bad as you may expect with @font-face; it can even be run in IE6 with a little bit of work. For more on that have a read through Making Web Fonts Work by Jon Tan but the downside here is mainly licensing issues. If EULA issues can be worked on and sufficient permissions granted, it is a clear winner and most definitely the way forward.

The Tests

Onto the test pages themselves. Nothing out of the ordinary or special here, just something quick and simple to give us an idea of how the chosen options work. You can view the test pages here.

The Outcome

So, after taking a look at each of the above, which is my preferred choice? I would have to say sIFR at the moment. Even with it being a bit on the tricky side to configure, once you have it set up and working it does a better job than any of the others. I’m ruling out @font-face here as I don’t believe we can look to that yet as a production ready solution. Having licenses available for sIFR is a major bonus and having support for text selection and hover states put it at the top of my list. I would place Cufón a close second at the moment and if we can sort out some licensing options for it and fix some minor issues, it could definitely be a worthy alternative to sIFR and put us a step closer to using @font-face. Of course this is purely personal opinion and I wouldn’t exclusively stick to one choice myself.

If you’re looking for an option to use in your own projects, I would recommend you use either sIFR or Cufón. I’m not trying to put one up against the other or tell you not to use a particular option, just providing you with an overview of those available and my personal opinions of them. It would probably be best to look at each individually on a per project basis and choose something that fits the needs of the site.

Each of the above has their pros and cons. None of them are perfect either but at least it’s a step in the right direction and better than nothing. We all have to work within boundaries and it’s nice to see these boundaries being stretched constantly. Here’s to the future of fonts on the web. Feel free to leave your comments below as always and also share the article through your preferred service.

Share This Post

If you use the following, consider sharing this article!

Social Media Icons courtesy of Rogie King