1. Home
  2. Docs
  3. General
  4. How to add custom font Kirki?

How to add custom font Kirki?

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

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 Sublime text and append the below code.HTML

function tmu_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', 'tmu_custom_fonts', 20 );

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

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

  • 1. Create a folder “fonts” in the parents theme (or child theme) and upload your font files (.woff, .woff2, etc.) to the folder “fonts” via FTP.
  • 2. Load your fonts from 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;
}