如何显示谷歌字体预览

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.

Answer 3

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

Answer 4

This github project comes to mind. It too offers the user a preview of google fonts Fontselect jQuery Plugin

Answer 5

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