Adding Multiple Custom Fonts to Customizer

[santosfel5]

Hi, I’m attempting to add custom fonts to the Customizer, so I can select the font among my other Google fonts. So far I’ve been able to add one with the code below in my functions.php

// Add custom font name in the Theme Option's typography section
// =============================================================================
function my_custom_font($data){
  $data['mywebfont'] = array(
          'source'  => 'Custom',
          'family'  => 'Fontania',
          'stack'   => '"Fontania", cursive',
          'weights' => array( '400' )
        );
 array_push($data, $data['mywebfont']);

  return $data;
  
}
add_filter('x_fonts_data', 'my_custom_font');
// =============================================================================

I would like to add another font, but have not had luck adding a secondary one. Here is the info for the second one

'source'  => 'Custom',
    'family'  => 'Acumin Pro Condensed Light',
    'stack'   => '"Acumin Pro Condensed Light", sans-serif',
    'weights' => array( '300' )

How would I be able to add both into the Customizer font selection?

[jade]

Hey @santosfel5,

Please try this code:

// Add custom font name in the Theme Option's typography section
// =============================================================================
function my_custom_font($data){
  $data['fontania'] = array (
    'source'  => 'Custom',
    'family'  => 'Fontania',
    'stack'   => '"Fontania", cursive',
    'weights' => array( '400' )
  );

  $data['acuminpro'] = array (
    'source'  => 'Custom',
    'family'  => 'Acumin Pro Condensed Light',
    'stack'   => '"Acumin Pro Condensed Light", sans-serif',
    'weights' => array( '300' )
);  

 array_push($data, $data['fontania']);
 array_push($data, $data['acuminpro']);

  return $data;
  
}
add_filter('x_fonts_data', 'my_custom_font');
// =============================================================================

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[santosfel5]

Hmm that didn’t work. It added it to the customizer, but upon selecting those fonts in the customizer it is not applying it to the body or heading styles.

[jade]

Hi @santosfel5,

I have checked and Acumin Pro is not a Google Font and the fonts that are available in the typography section are Google Fonts, and System fonts.

You might want to use Adobe Font (Typekit) since Acumin Pro is available from that source.

Font Manager | Themeco Docs

Another option would be to use the Font Manager and install Acumin Pro and Fontania from there.

Hope this helps.