Cacher is the code snippet organizer for pro developers

https://sridharkatakam.com/google-fonts-selector-in-the-customizer-in-genesis/

This tutorial provides the steps to implement gist.github.com/purzlbaum/afa41255afee372128e6 in Genesis so users can select font family for headings and body fonts in the Customizer.

// Step 1
// Genesis Sample loads Source Sans Pro in a few variations (font weights) by default.

// Let us comment this out and load it only if a selection has not been made in the Customizer.

// Edit functions.php.

// Replace

wp_enqueue_style(
    'genesis-sample-fonts',
    '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700',
    array(),
    CHILD_THEME_VERSION
);

// with

$headings_font = esc_html( get_theme_mod( 'custom_headings_font' ) );
$body_font     = esc_html( get_theme_mod( 'custom_body_font' ) );

if ( $headings_font ) {
    wp_enqueue_style( 'custom-headings-fonts', '//fonts.googleapis.com/css?family=' . $headings_font );
} else {
    wp_enqueue_style( 'custom-source-sans', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700' );
}

if ( $body_font ) {
    wp_enqueue_style( 'custom-body-fonts', '//fonts.googleapis.com/css?family=' . $body_font );
} else {
    wp_enqueue_style( 'custom-source-body', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,700' );
}

// Create a file named say, google-fonts.php inside the lib directory having the following:

<?php

return array(
    'Source Sans Pro:400,700,400i,700i'            => 'Default',
    'Source Sans Pro:400,700,400italic,700italic'  => 'Source Sans Pro',
    'Open Sans:400italic,700italic,400,700'        => 'Open Sans',
    'Oswald:400,700'                               => 'Oswald',
    'Playfair Display:400,700,400italic'           => 'Playfair Display',
    'Montserrat:400,700'                           => 'Montserrat',
    'Raleway:400,700'                              => 'Raleway',
    'Droid Sans:400,700'                           => 'Droid Sans',
    'Lato:400,700,400italic,700italic'             => 'Lato',
    'Arvo:400,700,400italic,700italic'             => 'Arvo',
    'Lora:400,700,400italic,700italic'             => 'Lora',
    'Merriweather:400,300italic,300,400italic,700,700italic' => 'Merriweather',
    'Oxygen:400,300,700'                           => 'Oxygen',
    'PT Serif:400,700'                             => 'PT Serif',
    'PT Sans:400,700,400italic,700italic'          => 'PT Sans',
    'PT Sans Narrow:400,700'                       => 'PT Sans Narrow',
    'Cabin:400,700,400italic'                      => 'Cabin',
    'Fjalla One:400'                               => 'Fjalla One',
    'Francois One:400'                             => 'Francois One',
    'Josefin Sans:400,300,600,700'                 => 'Josefin Sans',
    'Libre Baskerville:400,400italic,700'          => 'Libre Baskerville',
    'Arimo:400,700,400italic,700italic'            => 'Arimo',
    'Ubuntu:400,700,400italic,700italic'           => 'Ubuntu',
    'Bitter:400,700,400italic'                     => 'Bitter',
    'Droid Serif:400,700,400italic,700italic'      => 'Droid Serif',
    'Roboto:400,400italic,700,700italic'           => 'Roboto',
    'Open Sans Condensed:700,300italic,300'        => 'Open Sans Condensed',
    'Roboto Condensed:400italic,700italic,400,700' => 'Roboto Condensed',
    'Roboto Slab:400,700'                          => 'Roboto Slab',
    'Yanone Kaffeesatz:400,700'                    => 'Yanone Kaffeesatz',
    'Rokkitt:400'                                  => 'Rokkitt',
);

// Modify the fonts that should appear in the dropdowns as needed.

// Step 3
// Let us define a custom function that ensures that the font being set is indeed from the above list.

// We shall set this function as the sanitize_callback later.

// Edit lib/helper-functions.php.

// At the end, add

/*
 * Props to the BLDR Theme: https://wordpress.org/themes/bldr/
 */

// Sanitizes Fonts.
function custom_sanitize_fonts( $input ) {
    global $custom_google_fonts;

    if ( array_key_exists( $input, $custom_google_fonts ) ) {
        return $input;
    } else {
        return '';
    }
}

// Note that functions.php loads this file via

// Adds helper functions.
require_once get_stylesheet_directory() . '/lib/helper-functions.php';

// $custom_google_fonts is going to be defined in the next step.

// Step 4
// We will now add a “Google Fonts” Section in the Customizer, the Setting and corresponding Control for both the select fields.

// Edit lib/customize.php.

// a) Near the top of the file, below the comment header add

$custom_google_fonts = require_once __DIR__ . '/google-fonts.php';

// b) Inside function genesis_sample_customizer_register( $wp_customize )

// add

global $custom_google_fonts;

// as the first line to reference it.

// Add the following inside the function near the end:

$wp_customize->add_section(
    'custom_google_fonts_section', array(
        'title'    => __( 'Google Fonts', 'genesis-sample' ),
        'priority' => 24,
    )
);

// Heading Font.
$wp_customize->add_setting(
    'custom_headings_font', array(
        'sanitize_callback' => 'custom_sanitize_fonts',
    )
);

$wp_customize->add_control(
    'custom_headings_font', array(
        'type'        => 'select',
        'description' => __( 'Select your desired font for the headings.', 'genesis-sample' ),
        'section'     => 'custom_google_fonts_section',
        'choices'     => $custom_google_fonts,
    )
);

// Body Font.
$wp_customize->add_setting(
    'custom_body_font', array(
        'sanitize_callback' => 'custom_sanitize_fonts',
    )
);

$wp_customize->add_control(
    'custom_body_font', array(
        'type'        => 'select',
        'description' => __( 'Select your desired font for the body.', 'genesis-sample' ),
        'section'     => 'custom_google_fonts_section',
        'choices'     => $custom_google_fonts,
    )
);

// Here’s the fully modified customize.php for your reference: https://pastebin.com/raw/XVXCxVbD
// Note that functions.php loads this file via

// Adds image upload and color select to Customizer.
require_once get_stylesheet_directory() . '/lib/customize.php';

// Step 5
// Finally, we shall inject CSS for setting the selected font-family on the front end.

// Edit lib/output.php.

// a) Inside genesis_sample_css() add (near the top, where the variables are defined)

// Fonts.
$headings_font = esc_html( get_theme_mod( 'custom_headings_font' ) );
$body_font     = esc_html( get_theme_mod( 'custom_body_font' ) );

// b) Near the end, locate the if block containing wp_add_inline_style().

// Above it add

if ( $headings_font ) {
    $font_pieces = explode( ':', $headings_font );

    $css .= "h1, h2, h3, h4, h5, h6 { font-family: {$font_pieces[0]}; }";
}

if ( $body_font ) {
    $font_pieces = explode( ':', $body_font );

    $css .= "body, button, input, select, textarea { font-family: {$font_pieces[0]}; }";
}

// Here’s the fully modified output.php for your reference: https://pastebin.com/raw/tjQvjCNL
// Note that functions.php loads this file via

// Includes Customizer CSS.
require_once get_stylesheet_directory() . '/lib/output.php';