Kadence - How to Add Custom Fonts
This tutorial is going to teach you how to add your own custom fonts to a Kadence child theme without using a font plugin.
This tutorial will only work for Hearten Made Kadence child themes.
If you would rather use a plugin, you can purchase a Kadence Membership (affiliate) to gain access to their Custom Font plugin (and all of their other plugins, blocks, add-ons, etc)
WHAT YOU NEED
- Access to your website files. You can either access your files from your hosting (in cpanel or some kind of file manager section), or you can download and use the WP File Manager plugin which allows you to access your website files through your WP dashboard.
- The Webfont(s) you want to add - preferably fonts that are in .woff and .woff2 format. If you don't have your fonts in a .woff and .woff2 format, you can use the Font Squirrel Webfont Generator to download your fonts in the correct web fonts format
BEFORE YOU BEGIN
I highly recommend that you disable the font(s) you want to upload to your website on your computer first. I recommend this because if you make a mistake when adding the fonts to your website, and you have the font enabled/activated on your computer, you will always see the font appear on your website even if it's not set up properly- you will not know if you've made a mistake.
So disable the font first on your computer, and then once you know the font works on your website, you can enable the font on your computer again.
If you're on a mac, go to Applications > Font Book > Right-click on the font(s) and click "disable font"
WATCH VIDEO
If you need it, here's a video you can watch that follows this tutorial!
Step 01: Open your theme folder
Access your website files and navigate to your theme folder. You will find your theme folder in: public_html > wp_content > themes.
Then, click on your theme folder to open it. I am using the Dainty kadence child theme for this tutorial, so I opened the "dainty" theme folder.
I am using the file manager in my Siteground hosting (websites > site tools > file manager) so your screen might look a tad different than mine if you're on different hosting or if you're using the WP File Manager plugin, but you should still see all of the theme files and folders similar to this:
Step 02: Create fonts folder
Click on the lib folder to open it.
Create a new folder inside of the "lib" folder called "fonts". **If your theme already has a folder called "fonts", do not make another fonts folder!
Open the fonts folder.
Step 03: Create webfonts if needed
If you don't already have your font in a .woff and .woff2 format, you can use use the Font Squirrel Webfont Generator to convert your font(s).
Just use the "optimal" setting and upload your font(s) to the generator, then download your kit. Inside the folder will be a .woff and .woff2 file. These are the files we're going to upload to the fonts folder in the next step.
You don't need the other files in the kit.
You can upload more than one font if you plan on adding multiple custom fonts. But just make sure you have a .woff and .woff2 for each font!
Step 04: Add the custom webfonts to the fonts folder
Drag & drop or upload the .woff and .woff2 font(s) you downloaded into the fonts folder.
Step 05: Add font-face CSS to editor backend
Go back to your theme files and open up the lib folder again.
Edit the custom-editor-style.css file and copy and paste the following at the very top of the file:
@font-face {
font-family: 'Muse';
src: url('fonts/hv_muse-webfont.woff2') format('woff2'),
url('fonts/hv_muse-webfont.woff') format('woff');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
font-display: swap;
}
At the top, replace Muse with your own font name.
Replace hv_muse-webfont.woff2 and hv_muse-webfont.woff with the name of your font file. They should be the exact same name as the font file you added to the fonts folder from step #4.
If your font is bold, you might want to change font-weight: normal; to font-weight: bold;
If the font is italic, you will want to change font-style: normal; to font-style: italic;
*Note: if you're adding more than one font, then you would just copy & paste this section again underneath the first, repeating this step for each font.
Save the file.
Here is how my custom-editor-style.css file looks after:
Step 06: Add font-face CSS to style.css
Go back to your theme files and now edit the style.css file
Near the top, copy and paste the same font-face CSS again, but this time in the URLs, add lib/ before /fonts. Like this:
@font-face {
font-family: 'Muse';
src: url('lib/fonts/hv_muse-webfont.woff2') format('woff2'),
url('lib/fonts/hv_muse-webfont.woff') format('woff');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
font-display: swap;
}
*Note: again, if you're adding more than one font, then you would just copy & paste this section again, repeating the steps for the other font(s).
Replace 'Muse' font with your own font name again.
Save the file.
Here's how my style.css file looks:
Step 07: Add custom hooks to functions.php
Go back to your theme files and open the functions.php file to edit it.
We're going to add 2 hooks that will allow us to 1) add the font to Kadence blocks in the page editor, and 2) add the font to the theme so we can use it in the customizer.
Copy and paste the following into the functions.php file.
You can paste it right above the line in the file that says:
/**
* Setup Child Theme Palettes
// Add custom font to blocks
function my_kadence_blocks_custom_fonts( $system_fonts ) {
$system_fonts[ 'Muse' ] = array(
'fallback' => 'Helvetica, Arial, sans-serif',
'weights' => array(
'400',
),
);
return $system_fonts;
}
add_filter( 'kadence_blocks_add_custom_fonts', 'my_kadence_blocks_custom_fonts' );
// Add custom font to theme
function my_kadence_custom_fonts( $system_fonts ) {
$system_fonts[ 'Muse' ] = array(
'fallback' => 'Helvetica, Arial, sans-serif',
'weights' => array(
'400',
),
);
return $system_fonts;
}
add_filter( 'kadence_theme_add_custom_fonts', 'my_kadence_custom_fonts' );
Change BOTH of the 'Muse' to your own font name. This should be the same font name from the CSS (E.g. the font name used in font-family: 'Muse')
If you used font-weight: normal; in the CSS from earlier, you can leave the weight at 400 (400 is the normal weight).
If you used font-weight: bold; you should change both of the '400' to either 600 or 700.
*Note: If you're uploading 2 fonts, it might look like this instead (just replace "Another Font Here" with your other font name):
// Add custom font to blocks
function my_kadence_blocks_custom_fonts( $system_fonts ) {
$system_fonts[ 'Muse' ] = array(
'fallback' => 'Helvetica, Arial, sans-serif',
'weights' => array(
'400',
),
);
$system_fonts[ 'Another Font Here' ] = array(
'fallback' => 'Helvetica, Arial, sans-serif',
'weights' => array(
'400',
),
);
return $system_fonts;
}
add_filter( 'kadence_blocks_add_custom_fonts', 'my_kadence_blocks_custom_fonts' );
// Add custom font to theme
function my_kadence_custom_fonts( $system_fonts ) {
$system_fonts[ 'Muse' ] = array(
'fallback' => 'Helvetica, Arial, sans-serif',
'weights' => array(
'400',
),
);
$system_fonts[ 'Another Font Here' ] = array(
'fallback' => 'Helvetica, Arial, sans-serif',
'weights' => array(
'400',
),
);
return $system_fonts;
}
add_filter( 'kadence_theme_add_custom_fonts', 'my_kadence_custom_fonts' );
Save the file.
Here is how my functions.php file looks after:
Step 08: Clear cache & test fonts
Now it's time to see if our fonts work!
First, it's important you clear/delete your site cache AND browser cache. If you don't know how to clear your cache, see tutorial here. If you have Cloudflare, make sure to clear your Cloudflare cache as well. I've noticed that sometimes you need to clear the cache multiple times to see changes.
Next, let's go to Appearance > Customize > General > Typography and see if the font is working in the customizer.
In the font dropdowns, you should see your custom font at the very top of the list!
And lastly, let's test out the font in the Kadence blocks inside the page editor.
From your dashboard, navigate to Pages and then click on a page or create a test page. Add or edit a Kadence block, like the Advanced Heading block. Add some text, and then in the block settings under Typography, click the font dropdown. In the list of fonts, you should see your custom font(s) at the top of the list. Like this:
Save the page and view it. You should be able to see your new font on the front end as well!
And that's it! All finished!
If your new fonts are not working properly, make sure you've cleared your cache (try multiple times if needed). If clearing the cache doesn't work, try following steps 1-8 closely again.
If you have tried following the steps again and are still having issues, feel free to ask for help. Please send screenshots of the fonts inside your fonts folder, the style.css file, the custom-editor-style.css file, and your functions.php file so that I can assist you.