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.