Engic - A Sleek Multiuse Responsive WP 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 and a dummy site URL.

You need to replace them with the actual Font Family name and your site URL. In this example fonts are uploaded in a folder webfonts inside you WordPress uploads 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('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.eot');
        src: url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.eot?#iefix') format('embedded-opentype'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.woff2') format('woff2'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.woff') format('woff'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.ttf') format('truetype'),
        url('http://www.yourdomainname.xxx/wp-content/uploads/webfonts/MyCustomFont.svg#wf') format('svg');
    }
</style>
<?php
}
add_action( 'wp_head', 'eut_child_theme_print_custom_fonts' );
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( 'engic_eutf_std_fonts', 'eut_child_theme_custom_font_selection' );

The first function adds CSS and the second adds the fonts to the Font Family selectors.

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.