How to show Google font preview

Question

I am loading Google font-families name into a select-list. When user select any font-family from the list, then I load that font dynamically. My code:

$.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 preview of the font to the user before loading that font.

Is this possible?

Answer 1

I ran into this challenge myself, so used some console action and open sourced the following: https://github.com/onassar/GoogleWebFonts-FontFamilyPreviewImages

I'll be pretty active in maintaining it (just gotta write up the docs now).

Answer 2

Try HiGoogleFonts. It shows all the google fonts in a drop down with a preview of each. it only loads the font which is selected. It uses a single image for fonts preview.