So I decided to implement these wonderful new fonts in a fail safe way where no site would fall victim to being crippled if/when the files were unreachable. Below are my cross-browser ways of doing just that, whether you would like to use the javascript loading method (example #1), or point directly to the css file (example #2).

The Google Fonts javascript loader method is nice because it gives you some css classes to use once the fonts have loaded, giving you more control over what your site looks like with or without the ‘fancy’ fonts, rather than merely relying on a font stack in the css to do that job.

(function() {
	var loaded = false;
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	script.onload = script.onreadystatechange = function() {
		if ( !loaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") ) {
			loaded = true;
			// Handle memory leak - IE
			script.onload = script.onreadystatechange = null;
			// check before using - IE6
			if(window['WebFont']){

				// Put your WebFont calls here
				WebFont.load({
					google: {
						families: [ 'Yanone Kaffeesatz', 'Vollkorn' ]
					}
				});

			}
		}
	};
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(script, s);
})();

(function() {
	var head = document.getElementsByTagName("head")[0] || document.documentElement;
	var link = document.createElement('link');
	link.type = 'text/css';
	link.rel = 'stylesheet';
	// enter the Google Fonts css url here
	link.href = 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Vollkorn';
	head.insertBefore( link, head.firstChild );
})();

Both can be placed in the head or foot of your page, although I recommend placing the snippet in the head so the file(s) will begin downloading as soon as possible.

Did you find this helpful, or have ideas to make it better? Let me know in the comments!

Photoshop’s new Content-Aware Fill is the auto-drool feature:

And Puppet Warp is blowing my mind:

Illustrator strokes mimicking brushes are awesome:

And Vector drawing in perspective is sweet:

Head over to Adobe to see the other cool features they’ve cooked up, or look for the tutorial videos this week from PhotoshopUser.com at their Photoshop CS5 Learning Center.

I currently use the library on this site (tentatively named ‘Themeo’) and will release an open source version once I’ve tweaked the code for easy configuration. The basic use will be to extend the library, creating a theme-specific class that will encapsulate your theme code.

class MyTheme extends Themeo {

	static public function get_header($file='header'){
		wp_deregister_script('jquery');
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"), false, '1.4');
		wp_register_script('app', Themeo::get_template_url() . "js/app.js", array('jquery'), '1.0');
		wp_enqueue_script('jquery');
		wp_enqueue_script('app');
		self::get_template_file('header/' . $file . '.php');
	}

	static public function get_sidebar($file='sidebar'){
		self::get_template_file('sidebar/' . $file . '.php');
	}

	static public function get_footer($file='footer'){
		self::get_template_file('footer/' . $file . '.php');
	}

}

And then calling your custom class in your theme’s files.

<?php MyTheme::get_header(); ?>

<?php if (have_posts()) : ?>
	<div class="posts">
	<?php while (have_posts()) : the_post(); ?>

		<?php MyTheme::get_template_file('post/loop-item-teaser'); ?>

	<?php endwhile; ?>
	</div><!-- .posts -->

	<div class="navigation">
		<?php next_posts_link('&laquo; Older Entries'); ?>
		<?php previous_posts_link('Newer Entries &raquo;'); ?>
	</div>
<?php endif; ?>

<?php MyTheme::get_footer(); ?>

This is a very simple example of how it could be used. More information to come as I get closer to releasing it.