How to show Google font preview
javascript, jquery
Solution
You could load the fonts into your page as described here. Then simply have a div with your sample text and style it based on the font chosen from the drop-down.
Specifically look at the last section on adding event handlers - you can use JS to detect when font(s) have finished loading and apply them as appropriate
Problem
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?