WordPress主题开发和Google Font API

Question

I'm developing a theme and I got this chunk of code which makes a dropdown of google fonts. The dropdown work fine and all, but my problem is that I can seem to make it work in my css.

function ounox_fonts_setup($wp_customize) {

    $url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDwe8tl4YMbg8asbjzbXDDFuxzR1Wm9EQ0';
    $response = wp_remote_get( 'http://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDwe8tl4YMbg8asbjzbXDDFuxzR1Wm9EQ0', array( 'sslverify' => true ) );
    $response = wp_remote_retrieve_body( wp_remote_get($url, array('sslverify' => false )));

    if( is_wp_error( $response ) ) {
    echo 'Something went wrong!';
    } else {

        $json_a = json_decode($response,  true);
        $font_items = $json_a['items'];
        $choices = array();

        foreach ($font_items as $font_value => $font_item) {
            $choices[$font_item['family']] = $font_item['family'].' (Google)';
        }

        $font_args = array(
            'label'     => 'Fonts Section',
            'section'   => 'ounox_fonts_section',
            'settings'  => 'ounox_fonts_display',
            'type'      => 'select',
            'choices'   => $choices
        );
    } 

    $wp_customize->add_section( 'ounox_fonts_section', array(
        'title' => 'Ounox Fonts'
    ));

    $wp_customize->add_setting( 'ounox_fonts_display', array(
        'transport' => 'refresh',
    ));

     $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'ounox_fonts_display_control', $font_args));

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

and also this which applies css to my theme.

function ounox_customize_css() { ?>

    <style type="text/css">
html, body {
            font-family: <?php echo get_theme_mod('ounox_fonts_display'); ?>;
        }
    </style>

<?php }
add_action('wp_head', 'ounox_customize_css');

How can I apply the selected font of the user to apply to the CSS? Sorry really bad at backend stuff.

Answer 1

Add below function in functions.php

function calling_google_font_script(){
     // Getting the set font from options.
     $temp_font_name = get_theme_mod('ounox_fonts_display');
     // Adding Font in Google URL
     $google_font = esc_url('https://fonts.googleapis.com/css?family=' . $temp_font_name);
     // Now Calling google font in website
     wp_enqueue_style( 'google-fonts', esc_url_raw($google_font), array(), null );
}

add_action('wp_enqueue_scripts','calling_google_font_script');