Aardvark

Adding new fonts to your website

To add new fonts to your website do the following:

Step 1: Upload your fonts with the format (.ttf, .otf, .woff, .eot, .woff2) to your child theme in the directory wp-content/themes/child-theme-name/fonts/

Step 2: Create a new file called fonts.css and upload it to wp-content/themes/child-theme-name/fonts/. Add the following code to this file:

@font-face {
font-family: 'My Web Font 1';
font-style: normal;
font-weight: 500;
src: url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
     url('webfont.ttf') format('truetype'); /* Safari, Android, iOS */
}

Step 3: In your child theme's functions.php file add:

function ghostpool_enqueue_new_fonts() {
    wp_enqueue_style( 'ghostpool-new-fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'ghostpool_enqueue_new_fonts' );
function ghostpool_add_new_font_families( $output ) {
    $new_fonts = array(
        'My Web Font 1',
    );
    $output = array_merge( $output, $new_fonts );
    return $output;
}
add_filter( 'ghostpool_font_families', 'ghostpool_add_new_font_families' );

Where 'My Web Font 1' is the display name.