Add Google font with Code Snippets plugin

Hi there,

Copy and paste this code in Code Snippet:

add_filter( 'generate_typography_customize_list','tu_add_google_fonts' );
function tu_add_google_fonts( $fonts )
{
	$fonts[ 'reenie_beanie' ] = array( 'name' => 'Reenie Beanie' );
	
	return $fonts;
}

Then click Save Changes and Activate then you should be good to go!

The newly added font will show up at the bottom of the list in the customizer.

Let me know.

Perfect! Thank you!

No problem :)

I'm back! I want to add some other Google fonts to a GP website, but I'm not exactly sure how to adapt the code you gave me above. For example, I want to add the entire Zilla Slab family, and Google gives me this code:
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">

Or this CSS:
font-family: 'Zilla Slab', serif;

Can I use the code above to add a whole font family?

Yup the code above should still work.

Let me know :)

I found this code from someone, and it worked:

add_filter( 'generate_typography_customize_list','tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
$fonts[ 'zilla_slab' ] = array(
'name' => 'Zilla Slab',
'variants' => array( '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ),
'category' => 'serif'
);

return $fonts;
}

Awesome!

This does not work for me. I am trying to add Saira Semi Condensed (https://fonts.google.com/specimen/Saira+Semi+Condensed) and neither of the above snippets work. Any troubleshooting tips?

Can you show me the code you are using?

The new font added will show up at the bottom of the list in case you missed it.

add_filter( 'generate_typography_customize_list','tu_add_google_fonts' );
function tu_add_google_fonts( $fonts )
{
	$fonts[ 'saira_semi_condensed' ] = array( 'name' => 'Saira Semi Condensed' );
	
	return $fonts;
}

The exact code worked for me, at the bottom of the list.

Can you make sure the snippet is activated?

Yes, the snippet is activated. I think I did everything right... Here are some relevant screenshots.

https://ibb.co/h02RR5
https://ibb.co/kCAD65
https://ibb.co/b0nhzQ

That is very strange. I copied and paste your code and it worked.

Can you try clearing all caching you may have?

If that still doesn't work can you send me the admin access through Account Issue? https://generatepress.com/contact/

Thanks!

Can you manually check the very bottom of the font list, in case the search isn't picking it up?

If that's not working, it may be because your plugin is firing before GPP, so the filter doesn't exist yet.

If that's the case, this would fix it:

add_action( 'after_setup_theme', 'tu_add_to_font_list' );
function tu_add_to_font_list() {
    add_filter( 'generate_typography_customize_list','tu_add_google_fonts' );
}

function tu_add_google_fonts( $fonts ) {
	$fonts[ 'saira_semi_condensed' ] = array( 'name' => 'Saira Semi Condensed' );
	
	return $fonts;
}

You'll also want to add the font category and variants to your function: https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list