Daniel Baldwin » web development http://www.danielcbaldwin.com Web Developer and Technology Enthusiast Thu, 27 May 2010 00:03:13 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Replacing fonts? Try replacing sIFR. http://www.danielcbaldwin.com/technology/replacing-fonts-try-replacing-sifr http://www.danielcbaldwin.com/technology/replacing-fonts-try-replacing-sifr#comments Fri, 26 Jun 2009 04:58:35 +0000 dbald http://www.stilito.com/?p=79 GenerationsIFR has always been really impressive with how well it works and how it can make websites look good and unique. However, I constantly dread implementing sIFR on a site as the setup always seems to be such a process that results in some issue that I have to spend extra time working out. For a long time I just assumed that this was the kind of hardship that I would have to deal with in order to appease all the designers out there since fir me the only other option was image replacement which is not an option for me because of server load and portability. Now, though, I am looking forward to not going through all the hassle because I have been recently introduced to a new option, Cufon, that promises to be much easier.  The things right off the bat that I really like about Cufon are that it doesn’t require any additional plugins such as flash, it works in all the major browsers, and it seems to render almost immediately. Getting Cufon running is also really easy and painless, the hardest part is that you have to go to their generator page, http://cufon.shoqolate.com/generate/, to generate some javascript that creates the font for you. Then you set up the page like this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Cufon Demo</title>
	<script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript" charset="utf-8"></script>
	<script src="Swiss_721_700.font.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		Cufon.replace("h1");
	</script>
</head>

<body>
<h1>Replaced Text</h1>

</body>
</html>

Cufon DemoSo doing the replacement really takes almost no code and almost no time to setup. There are 2 other parts of Cufon that have me impressed and happy. The first is that the selectors for the replace are very basic by default but lets you do advanced selectors with the help of a javascript framework like jQuery or Prototype and you dont have to do anything extra other than just have the framework there. I think this is cool because for me most of the time I am using jQuery or Prototype on my projects so they are already there and then I know that Cufon’s code isnt bloated with repeat functionality. The second feature that I am excited for is Cufon’s ability to reload it’s replacements on the page. This is helpful when content changes on the page without a page reload like with ajax. In sIFR you would have to re-call your whole replacement statement and it would look something like this:

sIFR.replace(newsgothicbd, {
	selector: '.demo_top',
	wmode: 'transparent',
	css: '.sIFR-root { background-color: #F9F9F9; color: #417596; text-transform: uppercase;} a { color: #417596; text-decoration: none; } a:hover { color: #417596; text-decoration: none;}'
});

however with Cufon you can just do this:

Cufon.refresh();

So I think it is pretty obvious that I am excited for this find and I am really excited to integrate the use of Cufon into my daily web development. I really thing that this will make the sites I work on look better, have a smaller footprint, and load much faster than with sIFR.

]]> http://www.danielcbaldwin.com/technology/replacing-fonts-try-replacing-sifr/feed 0