[Resolved] Add Google font with Code Snippets plugin

[Melanie Jongsma]

I know there are other topics about customizing the Google font list, but after reading through all of those, I feel like I’ve gone around in circles and I’m still not clear on how to add my font.

I added the Code Snippets plugin, and I’ve created a snippet called Add Google Font. My problem is, I’m not sure which code I need to copy and paste into the Code area! Is it a PHP code? A CSS code? The Embed code that Google provides? I’m not sure.

The Google font I want to add is Reenie Beanie. The Embed code I get from Google is:
<link href=”https://fonts.googleapis.com/css?family=Reenie+Beanie&#8221; rel=”stylesheet”>

With this information, could someone tell me how to use the Code Snippets plugin to add Reenie Beanie to GP’s font list?

Thank you!

[Leo]

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.

[Melanie Jongsma]

Perfect! Thank you!

[Leo]

No problem 🙂

[Melanie Jongsma]

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&#8221; rel=”stylesheet”>

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

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

[Leo]

Yup the code above should still work.

Let me know 🙂

[Melanie Jongsma]

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;
}

[Leo]

Awesome!

[Jacob]

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?

[Leo]

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.

[Jacob]

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;
}

[Leo]

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

Can you make sure the snippet is activated?

[Jacob]

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

[Leo]

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!

[Tom]

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

[Author]

Posts