Web Font Picker


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+"&amp;v2";
 var stylesheet = "<link href='http://fonts.googleapis.com/css?family="+family+"&amp;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) {

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.