Add custom font in June

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!

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.