How to add a custom font for Kirki?

Open the file in this path /wp-content/themes/theme-folder/function.php using some editor like notepad++.

If you have activated the child theme then open the file in this path /wp-content/themes/childtheme-folder/function.php using some editor like notepad++ and append the below code.

function oceanthemes_custom_fonts( $standard_fonts ){
  $my_custom_fonts = array();
  $my_custom_fonts['kitten'] = array(
    'label' => 'kitten',
    'variants' => array('regular'),
    'stack' => 'kitten, sans-serif',
  );
  $my_custom_fonts['font2'] = array(
    'label' => 'Another Font',
    'variants' => array('regular','italic','700','700italic'),
    'stack' => 'anotherfont, sans-serif',
  );
  return array_merge_recursive( $my_custom_fonts, $standard_fonts );
}
add_filter( 'kirki/fonts/standard_fonts', 'oceanthemes_custom_fonts', 20 );

Note: You have to replace the text kitten as per your need.

You’ve already added your own fonts to the WordPress Typography dropdown. Now you also need to add the fonts to your website.

  • 1. Create a folder “fonts” in the parent’s theme (or child theme) and upload your font files (.woff, .woff2, etc.) to the folder “fonts” via FTP.
  • 2. Load your fonts from the style.css file of your theme (child theme) file, using the @font-face method.

CSS

@font-face {
font-family: 'kitten';
src: url('fonts/kitten_light-webfont.woff2') format('woff2'),
url('fonts/kitten_light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}