Kirki : How to add custom fonts

If you want to add a custom font to the kirki typography field then kindly follow the below steps.

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 DreamWeaver and append the below code.


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.

@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;
}

Rate This Article

(64 out of 128 people found this article helpful)

Leave A Comment?

This site uses Akismet to reduce spam. Learn how your comment data is processed.