Find below the three basic steps to follow when adding a new custom font to your June theme:
1. Open the functions.php file and add this code:
function cl_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', 'cl_custom_fonts', 20 );
2. Upload the custom font files into css/fonts folder inside theme folder. Normally you have to upload .woff font type and woff2
3. You have to load the font through css font-face
@font-face {
font-family: 'customfont';
src: url('fonts/customfont_light-webfont.woff2') format('woff2'),
url('fonts/customfont_light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Save the changes in css file.
Now you have only to select the new font from the customizer.
*If you have followed all steps and still not getting result, please open a ticket into our support forum!
Leave A Comment?
You must be logged in to post a comment.