Google Fonts not working for body font


#1

Hi team,

It seems like the google font is not working for Body fonts. Under Customizing>Typography, the font is the same no matter what I change. There is no issue for Headings fonts though.

I have tried:
1)Deactivating all plugins except Kirki Toolkit, Page Builder by Site Origin & Woocommerce
2)Removing child theme and additional CSS, reinstalling theme

and the issue still persists…

Affected site: https://chocorea.com

Would you be able to assist? Thank you!

Regards
Manhua


#2

Hello Manhua,

Which font did you choose? So I can try reproducing it in my test site.

Regards,
Kharis


#3

Hi kharisblank,

I am using Rum Raisin for body fonts. (philosopher for headings fonts)

Thank you!

Regards
Manhua


#4

Hello Manhua,

I just noticed that there’s a little bug with choosen fonts that should be corrected in the next version. At this time, to fix it yourself, try adding the below functions to your child theme’s functions.php:

    add_action( 'wp_enqueue_scripts', 'leto_child_enqueue_fonts' );
    function leto_child_enqueue_fonts() {

      $google_font_url = '';

      $body_font = get_theme_mod('leto_body_fonts', 'Rubik');
      $headings_font = get_theme_mod('leto_headings_fonts', 'Rubik');

      $fonts     		= array();
    	$fonts[] 		= esc_attr( str_replace( '+', ' ', $body_font ) );
    	$fonts[] 		= esc_attr( str_replace( '+', ' ', $headings_font ) );

      if ( $fonts ) {
    		$google_font_url = add_query_arg( array(
    			'family' => urlencode( implode( '|', $fonts ) )
    		), 'https://fonts.googleapis.com/css' );
    	}

    	wp_enqueue_style( 'leto-google-fonts', esc_url( $google_font_url ), array(), null );

    }

    add_action( 'wp_head', 'leto_child_wp_head' );
    function leto_child_wp_head() {
      $body_font = get_theme_mod('leto_body_fonts', 'Rubik');
      $headings_font = get_theme_mod('leto_headings_fonts', 'Rubik');

      echo '<style type="text/css">';

      if($body_font != 'Rubik') :
      ?>
        body {
          font-family: <?php echo $body_font; ?> !important;
        }
      <?php
      endif;

      if($headings_font != 'Rubik') :
      ?>
        h1, h2, h3, h4, h5, h6, .site-title {
          font-family: <?php echo $headings_font; ?> !important;
        }
      <?php
      endif;

      echo '</style>';

    }

If you don’t run a child theme, alternatively you can use Code Snippets or Functionality plugin.

Regards,
Kharis


#5

Hello Kharisblank,

It works now. Thank you so much!:grinning:

Regards
Manhua


#6

You’re welcome Manhua!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis