add a google font

[Matthieu]

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

[Leo]

Hi there.

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

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

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matthieu]

It’s perfect ! Thanks !

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Philippe]

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

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts