Add Custom Fonts to Kirki customizer (ok)

https://tomiup.com/add-custom-fonts-to-kirki-customizer/

You want to add Custom Fonts to Kirki Customizer ? This article, I will guide you how to do that. Very simple and fast.

You can add the fonts to the parents theme directly or child theme. I recommend that you should deploy in child theme. Let’s try steps by steps:

1. Add custom fonts to Kirki Customizer

You can add custom fonts to the Typography dropdown in the WordPress customizer by adding this filter to functions.php file of the parents theme (or child theme).

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 );

• label: name that gets displayed in the typography dropdown

• variations: all font weights you want to include as an array

• stack: css font-family attribute

‘100’
‘100italic’
‘200’
‘200italic’
‘300’
‘300italic’
‘regular’
‘italic’
‘500’
‘500italic’
‘600’
‘600italic’
‘700’
‘700italic’
‘800’
‘800italic’
‘900’
‘900italic’

2. Adding custom fonts to your website

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

If your font is not ready for web use, you can use a webfont generator like font squirrel.

Note: The fonts you’re creating must be legally eligible for web embedding!

Step 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.

Add custom fonts for WordPress Customizer using Kirki

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

1234567

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

Done!

You have successfully added the custom font to your website and now select it from the Typography in the WordPress customizer.

Have any questions? Please comment below.