Add all Google Fonts it you want in the WordPress Customizer

We start by creating a file that we will call myfonts.php.

In the first box below we see the code to set with an array the default value (in this case blank field), the transport, the user permissions of those who can access this option:

1
2
3
4
5
6
7
8
9
 $wp_customize->add_setting( 'my_fonts', array(
         'default'        => '', // by default is blank, choose your font name.
          'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
          'transport' => 'refresh',
         'capability' => 'edit_theme_options',
          'sanitize_callback' => 'esc_html',
     ) );

     $wp_customize->get_setting( 'my_fonts' )->transport = 'refresh';
Sezione creata nel customizer di Wordpres

Below is the code to add the section in the WordPress customizer with the title and priority to make it appear at the top.

1
2
3
4
 $wp_customize->add_section( 'my_fonts_setting' , array(
 'title'      => __('My Google Fonts Setting','yourtextdomain'),
 'priority'   => 10,
) );
input field where we will insert the name of the preferred font

Now the array for a description and input where we will insert manually in the customizer the name of our favorite Google font (first letter of the font name will always be uppercase es Cardo and not cardo, for compound names Source Sans Pro and not source sans pro.

1
2
3
4
5
6
 $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'my_fonts', array(
         'label'   => __('Font Name','yourtextdomain'),
         'description' =>  __('Insert here in below the Google font name (don\'t forget! Capitalize the first letter of the name)','yourtextdomain'),
         'section' => 'my_fonts_setting',
         'settings'   => 'my_fonts',
     ) ) );

We add the action to register the function that contains everything as we will see later in the file myfonts.php

1
add_action( 'customize_register', 'my_customize_register' );

Now the code for the font style

1
2
3
4
5
6
7
8
function header_output() {
?>
<!--Customizer CSS-->
<style type="text/css">
  <?php self:generate_css(' body', 'font-family', 'my_fonts','\'','\', Arial, Verdana, Monaco, Times !important'); ?>
</style><!--/Customizer CSS-->
<?php
}

And finally the equeue of javascript for the live preview that we will see later, as well as the action for the output of the style.

1
2
3
4
5
6
7
8
9
 /**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */

function my_customize_preview_js() {
    wp_enqueue_script( 'my-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', 'my_customize_preview_js' );

add_action( 'wp_head' , 'header_output' );

And here is the complete myfonts.php file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// file myfonts.php
function my_customize_register( $wp_customize ) {

$wp_customize->add_setting( 'my_fonts', array(
'default'        => '', // by default is blank, choose your font name.
'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
'transport' => 'refresh',
'capability' => 'edit_theme_options',
'sanitize_callback' => 'esc_html',
) );

$wp_customize->get_setting( 'my_fonts' )->transport = 'refresh';

$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'my_fonts', array(
'label'   => __('Insert here in below the Google font name (don\'t forget! Capitalize the first letter of the name)','yourtextdomain'),
'section' => 'my_fonts_setting',
'settings'   => 'my_fonts',
) ) );

$wp_customize->add_section( 'my_fonts_setting' , array(
'title'      => __('My Google Fonts Setting','yourtextdomain'),
'priority'   => 10,
) );

}
add_action( 'customize_register', 'my_customize_register' );

function header_output() {
?>
<!--Customizer CSS-->
<style type="text/css">
<?php self:generate_css(' body', 'font-family', 'my_fonts','\'','\', Arial, Verdana, Monaco, Times !important'); ?>
</style><!--/Customizer CSS-->
<?php
}
 function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
   $return = '';
   $mod = get_theme_mod($mod_name);
   if ( ! empty( $mod ) ) {
      $return = sprintf('%s { %s:%s; }',
         $selector,
         $style,
         $prefix.$mod.$postfix
      );
      if ( $echo ) {
         echo $return;
      }
   }
   return $return;
 }

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */

function my_customize_preview_js() {
    wp_enqueue_script( 'my-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', 'my_customize_preview_js' );
add_action( 'wp_head' , 'header_output' );

Now we create the javascript file customizer.js in jQuery for the live preview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 /**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */


( function( $ ) {
 
     //Update site fonts in real time...
        wp.customize( 'my_fonts', function( value ) {
        value.bind( function( newval ) {
            $('body').css('font-family', newval );
                } );
    } );
} )( jQuery );

And in the functions.php file the function for the enqueue of the Google Fonts APIs adding at least 3 parameters for the font size and those of the language, then the include of the file myfonts.php

1
2
3
4
5
6
7
8
9
10
11
12
// functions.php
function my_scripts() {
$my_mygoglefont = get_theme_mod('my_fonts', '');
    $protocol = is_ssl() ? 'https' : 'http';

wp_enqueue_style( 'googleFonts', esc_url_raw("$protocol://fonts.googleapis.com/css?family=$my_mygoglefont:200,300,400&subset=latin,latin-ext,greek-ext,greek") );
 }
add_action( 'wp_enqueue_scripts', 'my_scripts' );
/**
 * Load myfonts.php
 */

require get_template_directory() . '/myfonts.php';

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

On this website we use first or third-party tools that store small files (cookie) on your device. Cookies are normally used to allow the site to run properly (technical cookies), to generate navigation usage reports (statistics cookies) and to suitable advertise our services/products (profiling cookies). We can directly use technical cookies, but you have the right to choose whether or not to enable statistical and profiling cookies. Enabling these cookies, you help us to offer you a better experience. Coockies Policy Privacy Policy.

Some contents or functionalities here are not available due to your cookie preferences!

This happens because the functionality/content marked as “%SERVICE_NAME%” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.