Download Google Webfonts Locally

Advertisement

WordPress Theme Review team reelase the Webfonts Loader to download the webfonts like Google fonts and host them locally.

We are going to see:

Information Information

According to current WordPress Theme review guidelines for themes prohibit the use of CDNs to load assets due to privacy/tracking concerns.

The only exception to that rule is Google-Fonts.

To avoid the CDN links like Google fonts we can now use the function wptt_get_webfont_styles() to load the webfonts fonts.

NOTE: It works for any web fonts in including the Google Fonts. Here, I’m showing the demo for Google fonts.

Top ↑

Typically load Webfonts Typically load Webfonts

// Load theme CORE css.
wp_enqueue_style( 'my-theme', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );

// Load fonts from Google.
wp_enqueue_style( 'my-theme-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans&400,400i,600,700,800,900&subset=latin,latin-ext', array(), null );

OR

// Load theme CORE css.
wp_enqueue_style( 'my-theme', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );

// Load fonts from Google.
wp_enqueue_style( 'my-theme-google-fonts', my_theme_google_fonts_url(), array(), null );

// Genereate and return the Google fonts url.
function my_theme_google_fonts_url() {

    $fonts_url = '';
    $font_families = array(
        'Open Sans:400,400i,600,700,800,900',
    );

    $query_args = array(
        'family' => urlencode( implode( '|', $font_families ) ),
        'subset' => urlencode( 'latin,latin-ext' ),
    );

    $fonts_url = add_query_arg( $query_args, "//fonts.googleapis.com/css" );

    return $fonts_url;
}

Both works same.

But, When I check it with Google Page Speed Insights then I found that it is render blocking asset which affects on performance.

So, What to do?

We can download the fonts from Google and host them on our website.

Its pretty simple with webfont-loader PHP class.

Below is the screenshot of my performance before using webfont-loader.

Before – 1.5kb / 780ms blocking

Top ↑

Load webfonts with wptt_get_webfont_styles() Load webfonts with wptt_get_webfont_styles()

Same as typical example we can load the webfotns as below:

// Load theme CORE css.
wp_enqueue_style( 'my-theme', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );

// Load fonts from Google.
wp_enqueue_style( 'my-theme-google-fonts', wptt_get_webfont_styles('https://fonts.googleapis.com/css?family=Open+Sans&400,400i,600,700,800,900&subset=latin,latin-ext'), array(), null );

OR

Add the web-fonts with wp_add_inline_style() to load them inline.

// Load theme CORE css.
wp_enqueue_style( 'my-theme', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );

// Load fonts from Google.
wp_add_inline_style( 'my-theme-google-fonts', wptt_get_webfont_url('https://fonts.googleapis.com/css?family=Open+Sans&400,400i,600,700,800,900&subset=latin,latin-ext') );

You can use anyone of them as you want.

For more details visit https://github.com/WPTT/webfont-loader/

After using the webfont-loader performance improved as:

After – Saved 1.5kb / 780ms blocking
%d bloggers like this: