How to properly include WebFont Loader and Google Fonts into WordPress theme?

Question

I am learning to develop WordPress and I build my theme from the scratch. I read that the best way to include Google Fonts into the theme is to use the WebFont Loader. This method help improve score in PageSpeed test.

I try to add WebFont Loader from function.php and wfloader.js file. Unfortunately, the font doesn't load into my theme. What am I doing wrong? I can't figure out myself.

So here is my code in the function.php file:

add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );

function wpb_scripts_styles() {
wp_register_script(
    'web-font-loader',
    '//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
    array( '' ),
    ''
);

wp_enqueue_script(
    'fonts-to-load',
    esc_url( get_stylesheet_directory_uri() ) . '/assets/js/wfloader.js',
    array( 'web-font-loader' ),
    ''
); 
}

Here is from wfloader.js

function webfontload() {
    WebFont.load({
        google: {
            families: [
                'Playfair+Display:400,700,900&subset=latin-ext'
            ]
        }
    });
}

Thanks for any advice!

Answer 1

Just 2 remarks not concering the main issue. I would not start your functions with wpb_ because a famous page builder plugin does it, you could have conflicts if you active that plugin with your theme. You don't need esc_url for the function get_stylesheet_directory_uri(), you can trust the result of this WordPress function. Have you checked if the script //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js is really loaded? I mean Inspect elements and search //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js in the HTML. If so, check if in the console you have errors, I mean F12 -> console

Answer 2

I fixed my code and it works :)

function custom_scripts_styles() {

    wp_register_script(
        'web-font-loader',
        '//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
        array(),
        null );

    wp_enqueue_script(
        'fonts-to-load',
        get_template_directory_uri() . '/assets/js/wfloader.js',
        array( 'web-font-loader' ),
        null,
        true ); 
    }