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.
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?
What version are you using?