[Resolved] How to add Google font

Home Forums Support [Resolved] How to add Google font

Home Forums Support How to add Google font

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #221415
    Fernando Díaz Gascón

    Hello,

    I want to use a Google Font called “Frank Ruhl Libre” and it is not in the Typography add-on list.

    Is it planned to be introduced in a next update?

    How can I introduce “Frank Ruhl Libre” in my GP web?

    I tried to do it following this: https://generatepress.com/forums/topic/add-more-google-fonts/

    – I take the codes from Google Fonts.
    – I put in wp_head hook this code: <link href=”https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre&#8221; rel=”stylesheet”>
    – I put in the style.css of my child theme this: font-family: ‘Frank Ruhl Libre’, sans-serif;
    – I put “inherit” using the Typography add-on
    – It does not work

    You can see the result in http://longhu.es.mialias.net/tuina-masaje-chino/ (I changed the body font to inherit).
    (the web is in test. To enter:
    user: longhu329
    pass: 2ZR25mxE
    )

    Thanks in advance

    #221474
    Tom
    Lead Developer
    Lead Developer

    Did you add the CSS to make your site use the font?

    body {
        font-family: 'Frank Ruhl Libre', sans-serif;
    }

    Let me know 🙂

    #221596
    Fernando Díaz Gascón

    Perfect!Thanks a lot.

    I missed the “body”.

    #221605
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

    #311470
    Talya

    Hey,
    got to this topic as I am searching to use a font that is not in the list – did all the steps but it doesn’t seem to work (tried font Alef – see here: http://www.chubeza.com). tried also to follow this article:
    https://docs.generatepress.com/article/customizing-the-google-font-list/
    But couldn’t figure out where to add the PHP code – I would rather do that to be able to easily customize each section with my chosen fonts.

    Sorry for using some else’s topic – hope it’s a common practice, I am new here 🙂

    #311580
    Tom
    Lead Developer
    Lead Developer

    Hi Talya,

    The font needs to be a Google Font for now, and you can add the PHP using these instructions: https://docs.generatepress.com/article/adding-php/

    A more user friendly interface is something I want to incorporate one day 🙂

    #326122
    Roy

    Is this possible to add the php code of adding “Alef” google font with GP HOOKS?
    I didn’t understand where should I put the code from this guide: https://docs.generatepress.com/article/customizing-the-google-font-list/

    And I don’t want to install unnecessary plugins..

    Thanks,

    Roy

    #326164
    Leo
    Staff
    Customer Support

    Hi Roy,

    Try using the Code Snippet plugin: https://docs.generatepress.com/article/adding-php/#code-snippets

    It’s a well coded tool that won’t really have any impact on the performance of your site 🙂

    #522751
    DM

    I used the code snippet plugin and this code:

    add_filter( ‘generate_typography_customize_list’, ‘tu_add_google_fonts’ );
    function tu_add_google_fonts( $fonts ) {
    $fonts[ ‘nanum_pen_script’ ] = array(
    ‘name’ => ‘Nanum Pen Script’,
    ‘variants’ => array( ‘400’, ‘500’, ‘700’ ),
    ‘category’ => ‘serif’
    );

    return $fonts;
    }

    The font is not in the pull down list under customization-> Typography.

    Can you help me?
    Thanks!
    DM

    #523110
    Leo
    Staff
    Customer Support

    Try this instead:

    add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
    function tu_add_google_fonts( $fonts ) {
    	$fonts[ 'Nanum_Pen_Script' ] = array( 
    		'name' => 'Nanum Pen Script',
    		'variants' => array( '400', '500', '700' ),
    		'category' => 'serif'
    	);
    
    	return $fonts;
    }
    #753544
    benaline

    This all worked out perfectly for me using code snippets. I also added extra fonts from the same family using another tip from another thread ( https://generatepress.com/forums/topic/gdpr-and-google-fonts/#post-587549) in one like this, if it might help someone:

    add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
    function tu_add_google_fonts( $fonts ) {
    	$fonts[ 'Barlow' ] = array( 
    		'name' => 'Barlow',
    		'variants' => array( '100', '100i', '200', '200i','300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ),
    		'category' => 'sans-serif'
    	);
      	$fonts[ 'Barlow Condensed' ] = array( 
    		'name' => 'Barlow Condensed',
    		'variants' => array( '100', '100i', '200', '200i','300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ),
    		'category' => 'sans-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' ),
    		'category' => 'sans-serif'
    	);
    	
    	return $fonts;
    }
    #753942
    Leo
    Staff
    Customer Support

    Awesome 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘How to add Google font’ is closed to new replies.