[Resolved] add a google font

Home Forums Support add a google font

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1512793
    Matthieu

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

    #1512957
    Leo
    Staff
    Customer Support
    #1513269
    Matthieu

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

    #1513493
    David
    Staff
    Customer Support

    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/

    #1513498
    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

    #1513787
    Leo
    Staff
    Customer Support

    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;
    }
    #1513804
    Matthieu

    It’s perfect ! Thanks !

    #1514913
    Leo
    Staff
    Customer Support
    #1592828
    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

    #1592994
    David
    Staff
    Customer Support

    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/

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.