add a google font

Hi there.

This should help:
https://docs.generatepress.com/article/customizing-the-google-font-list/

Let me know :)

Hello, thank you for your answer. The css code to add is added directly in: Appearance> Customize> Additional CSS ?
Thanks

Hi there,

the code in the article Leo provided is PHP.
This article explains how to add PHP:

https://docs.generatepress.com/article/adding-php/

Hello yes I saw that it was in php. On the other hand, I installed the snippet code extension in order to add the code to integrate my typo chosen on google font (Cormorant Garamond) :

add_filter ('generate_typography_customize_list', 'tu_add_google_fonts');
function tu_add_google_fonts ($ fonts) {
	$ fonts ['Cormorant_Garamond'] = tableau ( 
		'name' => 'Cormorant_Garamond',
		'variantes' => array ('300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i'),
		'category' => 'serif'
	);
	
	renvoie $ fonts;
}

It does not work. Does the piece of code need to be modified ?
Thanks

Copy the exact code here and paste it in Code Snippet:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'cormorant_garamond' ] = array( 
		'name' => 'Cormorant Garamond',
		'variants' => array( '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ),
		'category' => 'serif'
	);
	
	return $fonts;
}

It's perfect ! Thanks !

No problem :)

Hi there,

I have a few problems with that.
Here is the code I added to a custom plugin:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'Petrona' ] = array( 
		'name' => 'Petrona',
		'variants' => array( '100', '100i', '200', '200i', '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i', '800', '800i', '900', '900i'),
		'category' => 'serif'
	);
	$fonts[ 'Barlow' ] = array( 
		'name' => 'Barlow',
		'variants' => array( '100', '100i', '200', '200i', '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i', '800', '800i', '900', '900i'),
		'category' => 'serif'
	);
	$fonts[ 'Barlow Condensed' ] = array( 
		'name' => 'Barlow Condensed',
		'variants' => array( '100', '100i', '200', '200i', '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i', '800', '800i', '900', '900i'),
		'category' => 'serif'
	);
	$fonts[ 'Barlow Semi Condensed' ] = array( 
		'name' => 'Barlow Semi Condensed',
		'variants' => array( '100', '100i', '200', '200i', '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i', '800', '800i', '900', '900i'),
		'category' => 'serif'
	);
	return $fonts;
}

After having done that I can now choose the font. The problem is that the variants are not loaded:
https://pasteboard.co/JGnaswD.png

It should look like that. (Ubuntu as example)
https://pasteboard.co/JGnbaDg.png

Since there are no variants I can't choose different variants for example in the headings.

The other thing is: I tried deactivating and reactivating my plugin. But I noticed that the fonts were still there after deactivating and they now appear twice on the list after reactivating. That looks messy.

Can you help me?

Merry Christmas
Philippe

Hi there,

Petrona is one of Googles Variable fonts which requires a different way to load the font.
Go to the fonts google page:

https://fonts.google.com/specimen/Petrona?query=Petrona&sidebar.open=true

Select the Styles you want, in the sidebar it will generate a Link like this:

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Petrona:wght@100&display=swap" rel="stylesheet">

You can then Hook this into the wp_head hook using a Hook element:

https://docs.generatepress.com/article/hooks-element-overview/

Hello, is it possible to add a font that is not on google font ?

Thanks

Hi there,

you would need to install the fonts locally:

https://docs.generatepress.com/article/adding-local-fonts/