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.