Soft Reject, Enqueue the Google fonts the right way

Envato Authors Theme Authors
1

Hello ,
This my code to link google font in my theme

wp_enqueue_style( 'anada-nuntino', 'https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap' );

Reviewer Point :

  1. Enqueue the Google fonts the right way https://gist.github.com/kailoon/e2dc2a04a8bd5034682c

Good read: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/s

I can’t understand the code given here

<?php
/*
Register Fonts
*/
function studio_fonts_url() {
    $font_url = '';
    
    /*
    Translators: If there are characters in your language that are not supported
    by chosen font(s), translate this to 'off'. Do not translate into your own language.
     */
    if ( 'off' !== _x( 'on', 'Google font: on or off', 'studio' ) ) {
        $font_url = add_query_arg( 'family', urlencode( 'Montserrat|Bowlby One|Quattrocento Sans:400,400italic,700italic,700&subset=latin,latin-ext' ), "//fonts.googleapis.com/css" );
    }

    return $font_url;
}

/*
Enqueue scripts and styles.
*/
function studio_scripts() {
    wp_enqueue_style( 'studio-fonts', studio_fonts_url(), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'studio_scripts' );

Can anyone please help me to enqueue the font in right way

Thanks and Regards
Ridhwan

2

Hi @WordPressRiver,

Let me some more explain the above code:

   function theme_slug_fonts_url() {
		$fonts_url = '';
		 
		/* Translators: If there are characters in your language that are not
		* supported by Lora, translate this to 'off'. Do not translate
		* into your own language.
		*/
		$lora = _x( 'on', 'Lora font: on or off', 'theme-slug' );
		 
		/* Translators: If there are characters in your language that are not
		* supported by Open Sans, translate this to 'off'. Do not translate
		* into your own language.
		*/
		$open_sans = _x( 'on', 'Open Sans font: on or off', 'theme-slug' );
		 
		if ( 'off' !== $lora || 'off' !== $open_sans ) {
			$font_families = array();
			 
			if ( 'off' !== $lora ) {
				$font_families[] = 'Lora:400,700,400italic';
			}
			 
			if ( 'off' !== $open_sans ) {
				$font_families[] = 'Open Sans:700italic,400,800,600';
			}
			 
			$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 esc_url_raw( $fonts_url );
	}
	
	function theme_slug_scripts_styles() {
		wp_enqueue_style( 'theme-slug-fonts', theme_slug_fonts_url(), array(), null );
	}
	add_action( 'wp_enqueue_scripts', 'theme_slug_scripts_styles' );

Don’t forget to I have used theme_slug instead of the original theme slug, you have to use your own theme slug.

So, the following code should work for you:

function anadanuntino_fonts_url() {
    $font_url = '';
    
    /*
    Translators: If there are characters in your language that are not supported
    by chosen font(s), translate this to 'off'. Do not translate into your own language.
     */
    if ( 'off' !== _x( 'on', 'Google font: on or off', 'anada-nuntino' ) ) {
        $font_url = add_query_arg( 'family', urlencode( 'Nunito:200,300,400,600,700,800&subset=latin,latin-ext' ), "//fonts.googleapis.com/css" );
    }

    return $font_url;
}

function anadanuntino_scripts() {
   wp_enqueue_style( 'anada-nuntino-fonts', anadanuntino_fonts_url(), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'anadanuntino_scripts' );

I have used your theme slug ‘anada-nuntino’.

1 Like