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.

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_styles('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/

%d bloggers like this: