How to show Google font preview

user_1459031 0
Viewed 4206

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?

jquery javascript
5 Answers

I tackled this problem myself recently when adding Google Fonts API functionality to have a constantly updated select list of currently available Google fonts. I used the jQuery Fontselect Plugin as a base but I modified it quite a bit to fit my purpose. I explain how I tackled it here: https://www.bibleget.io/2020/04/released-v5-3-of-the-wordpress-plugin/ Basically I'm using some sophisticated cURL requests to the Google Fonts API in order to download locally a reduced version of each font with only the characters that are used for the name of the font, and then preloading those reduced versions of the fonts onto the page that will have the select dropdown. You can see it in action here: https://youtu.be/zqJqU_5UZ5M

user_3949210
Related