• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Load CSS 2 Google Fonts In Genesis Child Themes

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.

Reader Interactions

Comments

  1. Debbie Hastings says

    February 13, 2023 at 8:54 pm

    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?

    Log in to Reply
    • Brad Dalton says

      February 14, 2023 at 4:04 am

      What version are you using?

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.