How to add custom fonts via Child Theme?

Under Theme Options - Typography you can select a variety of Standard and Google Fonts.

In some cases you might need to use a Custom Font, we have implemented a solution to add your Custom Fonts and be able to select them in the Typography section of our options panel ( Theme Options - Typography ).

To use fonts in WordPress it's normally required to add some css code in your header. The remaining part is to be able to select it from the Font Family combo boxes.

Of course you can also add refined css code under Theme Options - CSS/JS Options - CSS Code.

Web fonts are provided in various formats:

• .eot
• .woff
• .woff2
• .ttf
• .svg

Usually some documentation is already provided when you purchase a custom Font. A sample css is normally included in the documentation.

As an example we'll use a font called: MyCustomFont. You need to replace it with the actual Font Family name. In this example fonts are uploaded in a folder webfonts inside you Child Theme root directory.

Add the following snippet in the functions.php file of your Child Theme.

function eut_child_theme_print_custom_fonts() {
?>
<style type="text/css">
    @font-face {
        font-family: 'MyCustomFont';
        src: url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.eot');
        src: url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.eot?#iefix') format('embedded-opentype'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.woff2') format('woff2'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.woff') format('woff'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.ttf') format('truetype'),
        url('<?php echo get_stylesheet_directory_uri(); ?>/webfonts/MyCustomFont.svg#wf') format('svg');
    }
</style>
<?php
}
add_action( 'wp_head', 'eut_child_theme_print_custom_fonts' );

The following function adds the fonts to the Font Family selectors.

function eut_child_theme_custom_font_selection( $std_fonts ) {
    $my_custom_fonts = array(
        "MyCustomFont"    => "MyCustomFont",            
    );
    return array_merge($std_fonts, $my_custom_fonts);
}
add_filter( 'eut_std_fonts', 'eut_child_theme_custom_font_selection' );

In $my_custom_fonts array you can also add additional fonts. Your custom Fonts will be added as Standard Fonts in all Font Family selectors under: Theme Options - Typography Options.

This way you can add as many custom fonts as you like.

Note: Keep in mind that the last filter is only available in theme Corpus, our other themes have similar hooks.

For Engic:

add_filter( 'engic_eutf_std_fonts', 'eut_child_theme_custom_font_selection' );

For Anemos:

add_filter( 'anemos_eutf_std_fonts', 'eut_child_theme_custom_font_selection' );

For Fildisi:

add_filter( 'fildisi_eutf_std_fonts', 'eut_child_theme_custom_font_selection' );