Saturday, May 21st, 2022

Load CSS 2 Google Fonts in Genesis Child Themes

Google Fonts now fully supports variable fonts in the CSS v2 API update. Let’s see how to modify the PHP code in your Genesis child theme to load 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:

Now you can change the line of code like this to load any other font family using CSS2:

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

Old Genesis Child Themes

You can also use wp_enqueue_scripts to load your google fonts by adding PHP code like this at the end of your child theme function 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 of your font-family property using your new fonts and you may also need to clear the caching.

Source link