How do I add new fonts to theme options backend?

To add custom fonts to the Theme Options typography options you can 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: 'MyWebFont';
font-style: normal;
font-weight: 500;
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'); /* Safari, Android, iOS */
}

You need to change "MyWebFont" to the font name you want to add.

Step 3: Edit the file field_typography.php located in the directory wp-content/themes/theme-name/lib/framework/redux/inc/fields/typography/.

Add this code after the line 39:

'MyWebFont' => "My Web Font",

Step 4: Next find the first occurrence of:

if ( isset( $this->field['all_styles'] ) && ! empty( $this->field['all_styles'] ) ) {

Above this add:

$this->field['ext-font-css'] = get_stylesheet_directory_uri() . 'fonts/fonts.css';

Step 5: Finally, in your child theme functions.php file add:

if ( ! function_exists( 'ghostpool_enqueue_custom_fonts' ) ) {
    function ghostpool_enqueue_custom_fonts() {
        wp_enqueue_style( 'gp-redux-custom-fonts', get_stylesheet_directory_uri().'/fonts/fonts.css');
    }
}
add_action( 'wp_enqueue_scripts', 'ghostpool_enqueue_custom_fonts' );