Javascript canvas loadFromJson不应用字体系列

我正在使用以下代码呈现google字体并更新画布：

    /* on change of font load the preview as well as canvas */
    $('#font').on('change', function () {
        $('.font_preview').show();
        var font_family = $(this).val();

        $('.font_preview').css('font-family', font_family, 14);
        $('.font_preview').html(font_family,'');
        load_web_font([font_family],'.font_preview',font_family,1);
    });

    function load_web_font(font_family, preview_div,font_family_text,preview_text) {
        var grep_font = jQuery.grep(font_family, function (n, i) {
            return ( n );
        });
        if (grep_font.length > 0) {
            var preview_text;
            if (preview_div) {
                preview_text = $(preview_div).text();
            }
            WebFont.load({
                google: {
                    families: font_family
                },
                fontloading: function (familyName, fvd) {
                    if (preview_div) {
                        if(preview_text==1)
                        {
                            $(preview_div).text('font loading ... ');
                        }
                    }

                },
                fontactive: function (familyName, fvd) {
                    if (preview_div) {
                        if(preview_text==1)
                        {
                            $(preview_div).text(preview_text);
                        }
                        load_font_on_canvas(font_family_text);
                    }
                },
                timeout: 10000
            });
        }
    }

     //Load Font on Canvas
    function load_font_on_canvas(font_style)
    {
        var font_style = font_style;
        if(font_style=='')
        {
            alert('Please select a Font Style');
            return false;
        }
        var tObj = canvas.getActiveObject();
        //Check that text is selected
        if(tObj==undefined)
        {
            alert('Please select a Text');
            return false;
        }
        tObj.set({
            fontFamily: font_style
        });
        canvas.renderAll();
    }

现在，我将画布数据存储为数据库中的json。因此，在此之后，当任何用户尝试编辑画布时，我将使用以下代码渲染画布：

    if(is_update==1) // Update then load the card
    {
        // parse the data into the canvas
        canvas1.loadFromJSON(front_side_object);
        // re-render the canvas
        canvas1.renderAll();

        canvas2.loadFromJSON(back_side_object);
        canvas2.renderAll();
    }

所以画布正在加载，但不是用户选择的字体。所以我试着用下面的代码用谷歌字体更新画布，但它不起作用

    //Grab each google fonts
    var all_fonts = [];
    $('#font option').each(function(){
        var font_family = $(this).val();
        //all_fonts +=  font_family + '|';
        if(font_family!='')
        {
            all_fonts.push(font_family);
        }
    });
    load_all_web_font(all_fonts);

    function load_all_web_font(all_fonts)
    {
        var grep_font = jQuery.grep(all_fonts, function (n, i) {
            return ( n );
        });
        WebFont.load({
            google: {
                families: all_fonts
            },
            fontloading: function (familyName, fvd) {
                //Do Something
            },
            fontactive: function (familyName, fvd) {
                //1st Try rerender canvas again after fonts is loaded
                //Do SOmething
                canvas1.loadFromJSON(front_side_object);
                // re-render the canvas
                canvas1.renderAll();

                canvas2.loadFromJSON($model->back_side_object);
                canvas2.renderAll();

                //Get the text and rerender the canvas
                canvas1.getObjects().filter(function(o) {
                    if (o.get('type') === 'text') {
                        console.log(o.get);
                        canvas1.renderAll();
                    }
                });
                canvas2.getObjects().filter(function(o) {
                    if (o.get('type') === 'text') {
                        canvas2.renderAll();
                    }
                });
            },
            timeout: 10000
        });
    }

---

在加载FromJSON之前，您必须检查google字体是否已下载。加载完google字体后，您可以再次调用Renderal。@artgb我已经在fontactive:function（familyName，fvd）中完成了此操作{事件。加载字体后，我将调用Renderal。请将JSFIDLE设置为当前状态。这里有一个自定义字体加载演示：它使用FontFaceObserver。在加载FromJSON之前，您必须检查google字体是否已下载。加载完google字体后，您可以再次调用Renderal。@artgb我已在fontactive:functi中完成此操作在（familyName，fvd）{event上。加载字体后，我将调用Renderal。请将JSFIDLE设置为当前状态。此处有一个自定义字体加载演示：它使用FontFaceObserver