Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Load Google Fonts Async

Home Forums Support Load Google Fonts Async

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #365690
    arabsworks

    Hi Tom,

    As you know most websites these days are using the useful Google web font library allowing you to import a huge library of fonts straight to your webpage so how we can you use the following code to load google fonts Async with GeneratePress.

    The google subset font is:
    https://fonts.googleapis.com/css?family=Changa:200,300,regular,500,600,700,800|Cairo:200,300,regular,600,700,900&subset=arabic

    The code snippet :
    <script type=”text/javascript”>
    WebFontConfig = {
    google: { families: [ ‘Changa’ ] }
    };
    (function() {
    var wf = document.createElement(‘script’);
    wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
    ‘://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js’;
    wf.type = ‘text/javascript’;
    wf.async = ‘true’;
    var s = document.getElementsByTagName(‘script’)[0];
    s.parentNode.insertBefore(wf, s);
    })();
    // ]]></script>

    GeneratePress 1.3.48
    GP Premium 1.4.2
    #365709
    arabsworks

    I was wondering if there’s a way to load Google fonts asynchronously in GeneratePress. i.e. not in the head section of each page, so that the page will start to render before the fonts are loaded resulting in a better page speed rank.

    I’m looking at Google’s web font loader (https://github.com/typekit/webfontloader) and came up with that code as they said to include at the page footer. But I’m not sure as to how to implement it in GeneratePress, as the theme itself outputs the code line in the head section.

    #365758
    Tom
    Lead Developer
    Lead Developer

    You would just tell GP not to load the fonts:

    add_action( 'after_setup_theme', 'tu_remove_google_font_call', 50 );
    function tu_remove_google_font_call() {
        remove_action( 'wp_enqueue_scripts','generate_enqueue_google_fonts', 0 );
    }

    Then you would add your JS to the footer.

    #365784
    arabsworks

    Thanks Tom for the code, as many themes developer change the code to load Google fonts asynchronously
    can you add this in the Typography Add-on please.

    #366109
    Tom
    Lead Developer
    Lead Developer

    I’m definitely looking into it 🙂

    #681403
    Ramesh Srinivasan

    +1 for the feature.


    @Tom
    : For now, will add the function you provided. Thank you!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.