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.

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

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' );
}

Step 2

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.

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.

Note that functions.php loads this file via

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

That’s it!

Thanks to Lee Anthony of SEO Themes for helping me with the implementation.