How to add custom fonts via the Child Theme in Blade

  • Created
  • Category

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.

1. Load Custom Fonts using font files

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. 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 grve_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', 'grve_child_theme_print_custom_fonts' );
  • Create a directory webfonts and copy the font files in that directory.
  • Replace font family MyCustomFont with the actual font family name.
  • Replace MyCustomFont.eot, MyCustomFont.woff2, MyCustomFont.woff etc. with the actual filenames

In order to add the new custom family to the font selectors add the following function:

function grve_child_theme_custom_font_selection( $std_fonts ) {
    $my_custom_fonts = array(
        "MyCustomFont"    => "MyCustomFont",            
    );
    return array_merge($std_fonts, $my_custom_fonts);
}
add_filter( 'blade_grve_std_fonts', 'grve_child_theme_custom_font_selection' );
  • Replace MyCustomFont with the font family used in the previous function

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.

2. Load Fonts using Typekit Fonts

Similarly you could add Typekit Fonts

In order to load your Typekit Fonts you need to add a function like:

function grve_child_enqueue_typekit() {
   wp_enqueue_script( 'typekit', 'https://use.typekit.net/xxxxxxx.js', array(), '1.0' );
   wp_add_inline_script( 'typekit', 'try{Typekit.load({ async: true });}catch(e){}' );
}
add_action( 'wp_enqueue_scripts', 'grve_child_enqueue_typekit' );

Just replace xxxxxxx with your Typekit ID

The Font Family selector method is exactly the same as the previous example.

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

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

Replace MyCustomFont with the slug defined in your Typekit.