WP SITES

Log in

Load CSS 2 Google Fonts In Genesis Child Themes

—

by

Brad Dalton

Google Fonts now fully supports variable fonts in the CSS v2 API update. Let’s look at how to modify the PHP code in your Genesis child theme in order to load both single and multiple Google font families.

Assuming you’re using the Genesis Sample child theme by StudioPress, go to wp-content > themes > genesis-sample > config > appearance.php and look for this line of code around line 30 :

You can now change the line of code like this to load another font family using CSS2 :

If you want to load multiple Google font families, modify the code like this :

Older Genesis Child Themes

You can also use wp_enqueue_scripts to load your Google fonts by adding PHP code like this to the end of your child themes functions file.

add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue_scripts_styles' );
function google_fonts_enqueue_scripts_styles() {

wp_enqueue_style( 'genesis-google-fonts', '//fonts.googleapis.com/css2?family=Crimson+Pro&display=swap', array(), genesis_get_theme_version() );

}

Tested using versions 2.2.3 and 3.4.1 of the Genesis Sample child theme by StudioPress.

You can then modify the value for your font-family property using your new fonts and you might also need to clear caching.

2 responses to “Load CSS 2 Google Fonts In Genesis Child Themes”

  1. Debbie Hastings Avatar
    Debbie Hastings

    Hmmm unfortunately, in the sample theme, it does not work.

    Google fonts suggests this: https://fonts.googleapis.com/css2?family=Dancing+Script&family=Jost:ital,wght@0,300;0,600;1,300;1,600&display=swap

    That does not work either.

    I’ve only been able to get the “old version” to work if you use “null” in the string like this:
    wp_enqueue_style( ‘google-font’, ‘https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Titillium+Web:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap’, array(), null );

    Any other suggestions on how to make it work in newer themes where it set in appearance.php?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      What version are you using?

      Reply

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.

Tutorial Request

Includes code guarantee and coding support.

Subscribe

Monthly

$75

Access to 10 premium tutorials per month.

Tutorial Request

Includes code guarantee and coding support.

Subscribe

Yearly

$500

Access to 15 premium tutorials per month.

Monthly Tutorial Request

Includes code guarantee and priority coding support.

Subscribe