Posted by on Friday, April 30th, 2010 at 5:28 pm.
Hi and welcome to this week’s web design video blog. Today we’re going to start a 3 part series of videos on the font replacement technique called sIFR or “sIFR” as we like to pronounce it. In part one, which is this video, we are going to explain what sIFR is, show you a live example, compare it to Cufón and discuss its’ compatibility with SEO. In part two, which is next week, we’ll have a live walk-through tutorial on how to install sIFR. And finally in part three, we’ll share some common tuning tips for working with sIFR.
Click the graphic above to view the live sIFR example in the video.
So, the whole point of Font Replacement Techniques like sIFR, Cufón and FLIR are to overcome the age-old limitation of designing websites with default system fonts. The way sIFR works is to use a combination of Flash and Javascript to display HTML text as rendered Flash in the typeface of your choice. So all you need to use sIFR is your normal HTML editor like Dreamweaver or Notepad, Adobe Flash and the font that you wish to use installed on your computer. So if we take a look at this example, you can see sIFR in action.
sIFR Vs Cufón
So now let’s compare sIFR to Cufón by looking at the Pros and Cons of each.
- The first question is – can you select or highlight the text?
With sIFR you can and with Cufón you can’t. This can be an important usability consideration for users who may wish to copy and paste your content. - Does embedding a font violate EULA or copyright?
Despite having a long, complicated answer, the simple answer with sIFR is no. sIFR doesn’t violate any copyright protection as the typeface is embedded in the Flash. Cufón however does violate copyrights. - Next, can you easily customise the font with shadows, anti-aliasing and rollover effects?
sIFR allows all of these things, unlike Cufón which has only limited tuning through CSS.
So far, sIFR looks to be the better choice for embedding your custom typefaces, however Cufón does trump sIFR on a few points
- Firstly, load time. Put simply, Cufón is a faster loading technique than sIFR.
- Secondly, compatibility. sIFR replies on both Flash and Javascript to load whilst Cufón only uses JavaScript.
sIFR and SEO
So the final part of our analysis of sIFR is to look at its’ compatibility with SEO or Search Engine Optimisation. It’s important to remember that the whole point of Font Replacement techniques like sIFR or Cufón is that you no longer have to use images to display simple text on your website. Font replacement techniques convert real HTML text into the typeface of your choice, leaving the normal, search engine friendly text behind the scenes in the coding.
Both sIFR and Cufón do this in exactly the same way, allowing Search Engine Spiders to crawl the HTML source and index your content as normal. Because sIFR and Cufón do this in the same way, they are both equally compatible with SEO. Cufón only beats sIFR because it loads faster.
Google have acknowledged sIFR and other font replacement techniques in an old blog on Google’s Webmaster Central Blog. We’ve added the link to this on this video’s supporting blog post. So in conclusion, sIFR is a fantastic tool for using custom fonts on your web pages. Until @font-face in CSS3 is better supported, Font Replacement techniques like sIFR provide an ideal, legal solution for SEO friendly typography on your web pages. If you’re new to sIFR don’t forget to watch our video next week, for a complete walk-through video tutorial on how to install and use sIFR.
External Websites
- Download sIFR 3 from the official website
- sIFR Mentioned by Google in their Webmaster Central Blog
- sIFR on Wikipedia
Channel