Support » Plugin: Autoptimize » 2.4.4 Google Fonts

  • Resolved Kingyyyy

    (@kingyyyy)


    Hello,

    With 2.4.2, all my Google fonts load well when “Combine and load fonts asynchronously with webfont.js” is enabled, and I have no issues at all.

    However, with 2.4.4, all fonts load well on the site, except for the Google fonts used in my main Slider Revolution slides – they become normal, basic fonts when webfont.js is enabled.

    Any help with this? I assume it’s to do with the following change “improved Google Fonts optimisation, praise to @nextendweb (of Smartslider3 fame)!”?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    interesting .. could you post the JS output with 2.4.2 vs the one produced by 2.4.4 here @kingyyyy ?

    Nextendweb

    (@nextendweb)

    Hi @kingyyyy, @optimizingmatters,
    everyone in the industry use the very same library to load Google Fonts: https://github.com/typekit/webfontloader
    The problem is that it does not support multiple instances: https://github.com/typekit/webfontloader/issues/309 If it worked with the previous version that might be luck. I did several tests and there was difference when the font was not in the browser cache and when it was in the cache. You might checked your site all the time with enabled browser cache and you missed when it did not work.

    With the fix what I suggested to Autoptimize, developers can add their Google fonts to Automize’s Web Font Loader instance and therein that case it works properly. But of course the plugin developers still need make a little changes to their existing code to support Autoptimize’s instance.

    Our solution is not a secret:

    var fontData = {
        google: {
            families: {}
        }
    };
    
    if (typeof WebFontConfig !== 'undefined' && typeof WebFont === 'undefined') {
        for (var k in WebFontConfig) {
            if (k === 'google') {
                if (typeof WebFontConfig.google.families !== 'undefined') {
                    for (var i = 0; i < WebFontConfig.google.families.length; i++) {
                        fontData.google.families.push(WebFontConfig.google.families[i]);
                    }
                }
            } else {
                fontData[k] = WebFontConfig[k];
            }
        }
    }
    if (typeof WebFont === 'undefined') {
        WebFontConfig = fontData;
    } else {
        WebFont.load(fontData);
    }

    Probably you just need to contact with Slider Revolution to solve the issue, it’s an easy fix.

    Kingyyyy

    (@kingyyyy)

    @optimizingmatters I’m not really show how to show the JS output, or where to look for it. Please let me know, and I will asap.

    @nextendweb Hope they do implement it!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    with AO 2.4.2 view-source of your homepage and copy-paste the contents of the script-tag that holds the inline webfontloader javascript (or the full HTML) into a pastebin.com paste

    then to the same in AO 2.4.4 and provide me with the url’s of the 2 pastes.

    Kingyyyy

    (@kingyyyy)

    Here you go @optimizingmatters

    2.4.2: https://pastebin.com/s6xU4Bfp

    2.4.4: https://pastebin.com/5buMZz7r

    2.4.2 has only one JS code with webfont in, whilst 2.4.4 has 2, in the header.

    Kingyyyy

    (@kingyyyy)

    I also get the following 2 errors in Inspect: https://i.gyazo.com/0f64dca345b26732ec73bff6a22ba7e7.png

    Whilst on 2.4.2 I don’t get any errors. I assume it’s to do with the fonts.

    Kingyyyy

    (@kingyyyy)

    Hmm, now it’s showing what the errors relate to: https://i.gyazo.com/173a0da46706996afd71c2796e3e2639.png

    Kingyyyy

    (@kingyyyy)

    Okay, I fixed the issue by pre-loading the fonts (downloading to my server) via Slider Revolution global options: https://i.gyazo.com/5fae8070d8c28205a8009188d24a6b55.png

    What I want to ask is, by not fetching from Google servers as a https request per se, and loading from my server, is this optimal, or will it slow down the site by adding additional resources and bandwidth/decreasing Google page score?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    loading from your own server in general will be better 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘2.4.4 Google Fonts’ is closed to new replies.