Kadence - Add Custom Fonts to Kadence

There are 2 ways you can add custom font to any Kadence child theme or the base theme. 

Option One:

 
Kadence Custom Fonts Plugin 

You can purchase that plugin here.

Option Two:

We're going to follow this blog post I created on installing web fonts but with a few changes. 

Step 1: Download your files

So now that you’ve purchased the font you’ll be using on your site. You’ll need to download the fonts on your computer (if you have a mac it extracts the file for you) extract your file and place in a place you’ll remember. Make sure you’re using the license for the font properly also.

Usually, you’ll get about 4 files (.eot, .svg, .ttf, .woff) you’ll want to upload all of these into your theme.

Step 2: Uploading into your child theme

This is where it gets a tad bit different for the Kadence child themes. Instead of creating the folder in the root, we're going to create the font folder in lib. 

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!

Upload your font files directly into that folder. 

Step 3: Include the font in your editor

Now it’s time for some code (mostly copy and paste) most web font providers will provide you with the CSS code you’ll need to install the font onto your theme. Here’s what that format looks like...

@font-face {
    font-family: 'FontName';
    src: url('fonts/FontName.eot');
    src: url('fonts/FontName.eot?#iefix') format('embedded-opentype'),
        url('fonts/FontName-webfont.woff') format('woff'),
        url('fonts/FontName-webfont.ttf') format('truetype'),
        url('fonts/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

With your purchase font information, you’ll enter that into the  custom-editor-style.css file.
Don't forget to save. 

Step 4: Add fonts to your style sheet

Here you'll use the same provided code but you'll need to add lib/ in front of fonts in the style.css file.

@font-face {
    font-family: 'FontName';
    src: url('lib/fonts/FontName.eot');
    src: url('lib/fonts/FontName.eot?#iefix') format('embedded-opentype'),
        url('lib/fonts/FontName-webfont.woff') format('woff'),
        url('lib/fonts/FontName-webfont.ttf') format('truetype'),
        url('lib/fonts/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Don't forget to save.

Step 5: Add custom hooks to functions

In this step, we're going to add the function hooks so the fonts will display in both the editor and the theme itself. Here's what that will look like. 

// Add custom font to blocks
function my_kadence_blocks_custom_fonts( $system_fonts ) {
 
  $system_fonts[ 'Font Name ] = 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[ 'Font Name ] = array(
    'fallback' => 'Helvetica, Arial, sans-serif',
    'weights' => array(
      '400',
    ),
  );
  return $system_fonts;
 
}
add_filter( 'kadence_theme_add_custom_fonts', 'my_kadence_custom_fonts' );

Make sure that you are using the same font name. Don't forget you can also change which fonts can be used as a fallback. To add additional weight or replace the weight from normal change the code to look like '400', '700', 

If you have more than one custom font. make sure that it looks like this..

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

Don't forget to save.