I created a dashboard that provides the option to upload fonts in .woff format which will be used with the Kirki framework. The files are added successfully but I can't figure out where to output the @font-face code from my custom-fonts.php file.

Code in my custom-fonts.php file:

function mytheme_add_custom_fonts() {

    $font_1      = mytheme_get_option( 'my_custom_font1' );
    $fontfamily1 = mytheme_get_option( 'my_custom_fontfamily1' );

    $output = '';

    if ( $font_1 && $fontfamily1 ) {
        $output .= sprintf( ' @font-face {font-family: "%s";font-display: swap;src: local("%s"), url("%s") format("woff");}',
            esc_attr( $fontfamily1 ), esc_attr( $fontfamily1 ), esc_attr( $font_1 )

    echo $output;

Code in functions.php file:

function mytheme_get_custom_fonts($standard_fonts) {
    $fontfamily1  = mytheme_get_option( 'my_custom_fontfamily1' );

    $list_fonts = array();
    $list_fonts['Canela'] = array(
        'label' => 'Canela',
        'variants' => array( 'regular', '300italic' ),
        'stack' => 'Canela',
    if ( $fontfamily1 ) {
        $list_fonts[ $fontfamily1 ] = $fontfamily1;

    return array_merge_recursive( $list_fonts, $standard_fonts );


add_filter( 'kirki/fonts/standard_fonts', 'mytheme_get_custom_fonts', 20 );

Note: the "Canela" font is set by default and the @font-face css rule has been included manually in my style.php file.

The problem is that the font uploaded ($fontfamily1 name) appears in the customizer but isn't actually applied (I guess it has to do with the mytheme_add_custom_fonts() function). So how to make this work?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.