Custom Fonts

You can add custom fonts to the typography dropdown in the WordPress customizer by adding this filter to your child theme’s functions.php.

function wpbf_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', 'wpbf_custom_fonts', 20 );

label: the name that gets displayed in the typography dropdown
variations: all font weights you want to include as an array
stack: the css font-family attribute

Available variations


Adding custom fonts to your website

The method above lets you chose your own set of fonts from the typography dropdown. Note that you still need to add the fonts to your actual 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 eliglible for web embedding!

1. Create a folder in your child theme called fonts and upload your font files (.woff, .woff2, etc.) to the fonts folder via ftp.

2. Now load your font from your child theme’s style.css 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;

3. Done! You have successfully added your custom font to your website and can now select it from the typography dropdown in the WordPress customizer.