Add Custom Fonts to Your Theme

• To import custom fonts to your theme, use the child theme included in your theme package.
• Your fonts must be in web format, meaning you must have one or several font files for each font (ttf, wotf format, etc.) and a CSS snippet to include.
• To be able to use your new font in the customizer and page builder element settings, you need to add a custom function in your child theme functions.php

Here is an example with the Roboto font. We will use the Font Squirrel web generator tool to generate a font package.

1. Import the font files in your child theme. We recommend copying the files into a assets/fonts folder of your theme.

2. Paste the CSS import snippet into your child theme style.css file

Make sure the path to your font files is correct.

@font-face {
    font-family: 'Roboto Regular';
    src: url('assets/fonts/Roboto/roboto-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/Roboto/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

3. Finally, add this PHP filter function to display the fonts in the theme and page builder options.

/**
 * Add custom font to the theme
 */
function add_custom_fonts( $fonts ) {
    $fonts['Roboto Regular'] = 'Roboto Regular';
    /* Add more fonts below */
    // $fonts[] = 'Roboto Italic';
    return $fonts;
}
add_filter( 'decibel_mods_fonts', 'add_custom_fonts' ); // replace the "decibel" prefix with your theme prefix
add_filter( 'wvc_fonts', 'add_custom_fonts' ); // add the fonts to the WPBakery Page Builder extension settings (for WPBakery themes).
add_filter( 'wolf_core_fonts', 'add_custom_fonts' ); // add the fonts to Elementor extension settings (for Elementor themes).

You can download this child theme example HERE.