Web Font Picker

WARNING: This article features ANCIENT code! I'm keeping it online because it's interesting to see what I was thinking 10+ years ago. But you DEFINITELY should not be using this code. Anything you're reading about on this page has changed significantly since this was written.

Google Web Fonts is kinda awesome. If you haven't checked it out already - basically it gives you a ton of new font choices that still degrade gracefully for older browsers. All you have to do is add a stylesheet to your page and specify the 'font-family'. It truly couldn't be easier. Also.. yay, free!

One annoyance is the workflow. You have to look at the collection, edit your css and/or webpages, reload, repeat. (However, the fonts are available for download, if you use Photoshop/Gimp/etc to design your pages).

The following code lets you change fonts on the fly by adding a little dropdown box to the top right corner. When you doubleclick anything on the page, it will be styled with the chosen font. The code is a bit ugly since it's just the first thing that came to mind. Nevertheless, I think it's kinda neat for experimenting.

// list of fonts to try
var families = ['Yellowtail','Astigmatic','Leckerli One'];
// build the dropdown box
$('body').append($('<select id="fontpicker"></select>'));
for(var i=0; i<families.length; i++) {
    $('#fontpicker').append('<option value="'+families[i]+'">'+families[i]+'</option>');
}
$('#fontpicker').css({'position': 'absolute','top': '0px', 'left': '0px'});

// bind doubleclick on every element
$('*').live('dblclick', function() {
    var family = $('#fontpicker').val();
    var href = "http://fonts.googleapis.com/css?family="+family+"&v2";
    var stylesheet = "<link href='http://fonts.googleapis.com/css?family="+family+"&v2' rel='stylesheet' type='text/css'>";
    $(this).css('font-family', family);
    // try not to load the same stylesheet twice
    var found = 0;
    $("head link[rel='stylesheet']").each(function() {
        if($(this).attr('href') == href) {
            found = 1;
        }
    });
    if(found == 0) {
        $('head').append(stylesheet);
    }
});

There's one big problem still, which is that you need to specify WHICH fonts you want to make available to the switcher. Better than doing it one at a time, but not as good as pulling the complete list from Google. I'm not sure of a super great way to achieve that, but maybe something to consider.