How to Add Custom Fonts

This tutorial will walk you through adding a custom font to your site. You will be able to use it in the Customizer and the Kadence Blocks page editor.


Upload the Font

First, you will need to access your website files. You can do that by going to your hosting’s control panel/file manager or by installing the WP File Manager plugin (great option if you don’t know how to get to your website files from your hosting).

  1. Go to public_html > wp-content > themes > select the theme folder (example: fairchild-child)
  2. Open the lib folder > open the fonts folder
  3. Drag and drop your font files (.woff and .woff2)* into the fonts folder

* If the font is free for commercial use but you don’t have the .woff and .woff2 formats, use transfonter to convert the fonts. Don’t do this with fonts that are strictly for desktop use.


Add the Font to the Editor Backend

Go to Appearance > Theme File Editor > open the lib folder > open the editor-styles.css file and paste this at the top:

@font-face {
    font-family: 'My Font Name';
    src: url('fonts/my_font_name.woff2') format('woff2'),
         url('fonts/my_font_name.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    font-display: swap;
}

Change My Font Name to the name of your font. Change my_font_name to the exact same name on the font files you’ve uploaded to the fonts folder (otherwise the fonts will not be loaded).

If the font has more variants/weights (like normal + bold), add the CSS a second time, change my_font_name to the bold version (like my_font_name_bold) and change font-weight to bold.


Add the Font to style.css

Go to Appearance > Theme File Editor > open the style.css file and paste this near the top:

@font-face {
    font-family: 'My Font Name';
    src: url('lib/fonts/my_font_name.woff2') format('woff2'),
         url('lib/fonts/my_font_name.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    font-display: swap;
}

Change My Font Name to the name of your font. Change my_font_name to the exact same name on the font files you’ve uploaded to the fonts folder (otherwise the fonts will not be loaded).

If the font has more variants/weights (like normal + bold), add the CSS a second time, change my_font_name to the bold version (like my_font_name_bold) and change font-weight to bold.


Add the Font to the Customizer

Go to Appearance > Theme File Editor > open the functions.php file and paste this at the end:

function sm_add_custom_fonts( $standard_fonts ) {
	$add_custom_fonts = array();
	$add_custom_fonts['My Font Name'] = array(
		'label' => 'My Font Name',
		'variants' => array( 'regular', 'bold' ),
		'stack' => 'My Font Name',
	);
	return array_merge_recursive( $add_custom_fonts, $standard_fonts );
}
add_filter( 'kirki/fonts/standard_fonts', 'sm_add_custom_fonts', 20 );

Replace My Font Name with the name of your font (font-family). Replace regular and bold with the variants (font-weight) of your font.

If you are adding more than 1 font, duplicate this part and replace the font name again:

	$add_custom_fonts['My Font Name'] = array(
		'label' => 'My Font Name',
		'variants' => array( 'regular', 'bold' ),
		'stack' => 'My Font Name',
	);

Add the Font to Kadence Blocks

Go to Appearance > Theme File Editor > open the functions.php file and paste this at the end:

function add_custom_fonts_kadence_blocks( $system_fonts ) {
	$system_fonts[ 'My Font Name' ] = array(
		'fallback' => 'Helvetica, Arial, sans-serif',
		'weights' => array(
			'400',
		),
	);
	return $system_fonts;
}
add_filter( 'kadence_blocks_add_custom_fonts', 'add_custom_fonts_kadence_blocks' );

Replace My Font Name with the name of your font (font-family). Replace 400 with the variant(s) (font-weight) of your font (example: ‘400’, ‘700’,).

If you are adding more than 1 font, duplicate this part and replace the font name again:

	$system_fonts[ 'My Font Name' ] = array(
		'fallback' => 'Helvetica, Arial, sans-serif',
		'weights' => array(
			'400',
		),
	);