Show Google font preview

I am loading the Google font name into the selection list. When a user selects any font family from the list, I load this font dynamically. My code is:

$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=...", {}, function (data) {
    $.each(data.items, function (index, value) {
        $('#fc').append($("<option></option>").attr("value", value.family)
                .text(value.family));
    });
    $('#fc').selectmenu({ select: function () {
        $('body').append("<link rel='stylesheet' id='colorbox-css'  href='http://fonts.googleapis.com/css?family=" + escape($(this).selectmenu("value")) + "' type='text/css' media='all' />");
    }
    });
});

Now I want to show the font preview to the user before loading this font.

Is it possible?