Support » Plugin: Autoptimize » Don’t load Google fonts asynchronously with webfont.js

  • Resolved lhollowmanl

    (@lhollowmanl)


    I have activated the option: “Combine and load sources asynchronously with webfont.js” then I cleaned cache and I could see the code inserted in the HTML but can not load the Google Fonts that I use.

    I’ve checked the code and found the WebFont script, but don’t know what else could be happening.

    I need help please πŸ™‚

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • I was researching a little more and I found in GTmetrix

    ###############

    Optimize the order of styles and scripts – A (92) – CSS/JS

    What’s this mean?

    The following inline script blocks were found in https://www.quirovida.com.pe/ between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.

    Inline script block #1

    ##############

    I am using WP-Rocket and have combined my css style sheets from their panel (I lost styles and effects with Autoptimize) However, thanks to GTmetrix, I have noticed that the code generated from Autoptimize: “Combine and load sources asynchronously with webfont.js” is adding it after the self-generated style sheet by WP-Rocket.

    Is there any option so that the code generated by Autoptimize from asynchronously with webfont.js can load before the WP-ROCKET css?

    I hope it is correct what I am mentioned otherwise I would like you to guide me.

    Thank you

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I could see the code inserted in the HTML but can not load the Google Fonts that I use.

    something (wp rocket?) is wrapping the webfontconfig object in IE-conditionals;

    
    <!--[if IE]> <script data-cfasync="false" id="ao_optimized_gfonts_config" type="text/javascript">WebFontConfig={google:{families:["Lato:400,700","Titillium Web:regular,600:latin-ext,latin","Open Sans:regular,300,italic:latin-ext,latin","Titillium Web:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic:latin","Open Sans:300,400,600,700,800,300italic,400italic,600italic,700italic,800italic:latin","Open Sans:200","Raleway:600,500"] },classes:false, events:false, timeout:1500};</script><link rel="stylesheet" type="text/css" href="/all-ie-only.css"> <![endif]-->

    which obviously should not happen.

    I think you’ll need to choose between AO and WP Rocket for minification + font optimization.

    Is there any option so that the code generated by Autoptimize from asynchronously with webfont.js can load before the WP-ROCKET css?

    no, that ao_optimized_gfonts_webfontloader inline JS has to be loaded late in the header really.

    hope this helps,
    frank

    Thank you very much for your reply.

    I did what you suggested but the error continues.

    1) Disable WP-ROCKET and clear cache
    2) Activate AO and activate the option “Combine and load sources asynchronously with webfont.js” but continue adding it in IE-Conditional
    3) To avoid problems on my home page I made a backup on another server: URL http://perubinario.com/qv/ (without plugins like WP-ROCKET or HIDE MY WP, etc)
    4) You can see the source code is the same as the web page where I do my tests with WP-ROCKET http://www.quirovida.com.pe

    I do not know what could be happening.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, nevermind wp rocket & co, the problem is that AO is injecting the webfontconfig JS block before the first <link which in your case is inside an IE conditional. I’ll have a think about how to fix that for a next version of AO ..

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK

    -> immediate fix; open wp-content/plugins/autoptimize/classes/autoptimizeExtra.php and on line 299 change

    $out = substr_replace( $in, $fonts_markup . '<link', strpos( $in, '<link' ), strlen( '<link' ) );

    into

    $out = substr_replace( $in, $fonts_markup . '<title', strpos( $in, '<title' ), strlen( '<title' ) );

    -> for the next version of AO I’ll add a filter to allow users to change the “injection-point” with 2 lines of code.

    frank

    Incredible, Awesome! that was the solution. Many thanks. Muchas gracias πŸ™‚

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    De nada lhollowmanl, feel free to leave a review of the plugin and support here! πŸ™‚

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Don’t load Google fonts asynchronously with webfont.js’ is closed to new replies.