enter image description here

I have implemented the following tutorial in my theme’s option panel.

http://wptheming.com/2012/06/loading-google-fonts-from-theme-options/

Every thing is working fine. But in the themeoption panel the default system fonts are showing in the drop down list.

/**
 * Returns an array of system fonts
 * Feel free to edit this, update the font fallbacks, etc.
 */
function options_typography_get_os_fonts() {
    // OS Font Defaults
    $os_faces = array(
        'Arial, sans-serif' => 'Arial',
        '"Avant Garde", sans-serif' => 'Avant Garde',
        'Cambria, Georgia, serif' => 'Cambria',
        'Copse, sans-serif' => 'Copse',
        'Garamond, "Hoefler Text", Times New Roman, Times, serif' => 'Garamond',
        'Georgia, serif' => 'Georgia',
        '"Helvetica Neue", Helvetica, sans-serif' => 'Helvetica Neue',
        'Tahoma, Geneva, sans-serif' => 'Tahoma'
    );
    return $os_faces;
}
/**
 * Returns a select list of Google fonts
 * Feel free to edit this, update the fallbacks, etc.
 */
function options_typography_get_google_fonts() {
    // Google Font Defaults
    $google_faces = array(
        'Arvo, serif' => 'Arvo',
        'Copse, sans-serif' => 'Copse',
        'Droid Sans, sans-serif' => 'Droid Sans',
        'Droid Serif, serif' => 'Droid Serif',
        'Lobster, cursive' => 'Lobster',
        'Nobile, sans-serif' => 'Nobile',
        'Open Sans, sans-serif' => 'Open Sans',
        'Oswald, sans-serif' => 'Oswald',
        'Pacifico, cursive' => 'Pacifico',
        'Rokkitt, serif' => 'Rokkit',
        'PT Sans, sans-serif' => 'PT Sans',
        'Quattrocento, serif' => 'Quattrocento',
        'Raleway, cursive' => 'Raleway',
        'Ubuntu, sans-serif' => 'Ubuntu',
        'Yanone Kaffeesatz, sans-serif' => 'Yanone Kaffeesatz'
    );
    return $google_faces;
}
/**
 * Checks font options to see if a Google font is selected.
 * If so, options_typography_enqueue_google_font is called to enqueue the font.
 * Ensures that each Google font is only enqueued once.
 */
    function options_typography_google_fonts() {
        $all_google_fonts = array_keys( options_typography_get_google_fonts() );
        // Define all the options that possibly have a unique Google font
        $google_font = woodpecker_get_option('google_font', 'Rokkitt, serif');
        $google_mixed = woodpecker_get_option('google_mixed', false);
        $google_mixed_2 = woodpecker_get_option('google_mixed_2', 'Arvo, serif');
        // Get the font face for each option and put it in an array
        $selected_fonts = array(
            $google_font['face'],
            $google_mixed['face'],
            $google_mixed_2['face'] );
        // Remove any duplicates in the list
        $selected_fonts = array_unique($selected_fonts);
        // Check each of the unique fonts against the defined Google fonts
        // If it is a Google font, go ahead and call the function to enqueue it
        foreach ( $selected_fonts as $font ) {
            if ( in_array( $font, $all_google_fonts ) ) {
                options_typography_enqueue_google_font($font);
            }
        }
    }
add_action( 'wp_enqueue_scripts', 'options_typography_google_fonts' );
/**
 * Enqueues the Google $font that is passed
 */
function options_typography_enqueue_google_font($font) {
    $font = explode(',', $font);
    $font = $font[0];
    // Certain Google fonts need slight tweaks in order to load properly
    // Like our friend "Raleway"
    if ( $font == 'Raleway' )
        $font = 'Raleway:100';
    $font = str_replace(" ", "+", $font);
    wp_enqueue_style( "options_typography_$font", "http://fonts.googleapis.com/css?family=$font", false, null, 'all' );
}
/*
 * Outputs the selected option panel styles inline into the <head>
 */
function options_typography_styles() {
     $output = '';
     $input = '';
     if ( woodpecker_get_option( 'google_font' ) ) {
          $input = woodpecker_get_option( 'google_font' );
      $output .= options_typography_font_styles( woodpecker_get_option( 'google_font' ) , '.google-font');
     }
     if ( $output != '' ) {
    $output = "n<style>n" . $output . "</style>n";
    echo $output;
     }
}
add_action('wp_head', 'options_typography_styles');
// Returns a typography option in a format that can be outputted as inline CSS
function options_typography_font_styles($option, $selectors) {
        $output = $selectors . ' {';
        $output .= ' color:' . $option['color'] .'; ';
        $output .= 'font-family:' . $option['face'] . '; ';
        $output .= 'font-weight:' . $option['style'] . '; ';
        $output .= 'font-size:' . $option['size'] . '; ';
        $output .= '}';
        $output .= "n";
        return $output;
}

And in theme-option page added the following code:

//fonts
        $options[] = array( 'name' => 'Selected Google Fonts',
            'desc' => 'Fifteen of the top google fonts.',
            'id' => 'google_font',
            'std' => array( 'size' => '36px', 'face' => 'Rokkitt, serif', 'color' => '#00bc96'),
            'type' => 'typography',
            'options' => array(
                'faces' => options_typography_get_google_fonts(),
                'styles' => false )
            );
        $options[] = array( 'name' => 'System Fonts and Google Fonts Mixed',
            'desc' => 'Google fonts mixed with system fonts.',
            'id' => 'google_mixed',
            'std' => array( 'size' => '32px', 'face' => 'Georgia, serif', 'color' => '#f15081'),
            'type' => 'typography',
            'options' => array(
                'faces' => $typography_mixed_fonts,
                'styles' => false )
            );
        $options[] = array( 'name' => 'System Fonts and Google Fonts Mixed (2)',
            'desc' => 'Google fonts mixed with system fonts.',
            'id' => 'google_mixed_2',
            'std' => array( 'size' => '28px', 'face' => 'Arvo, serif', 'color' => '#ee9f23'),
            'type' => 'typography',
            'options' => array(
                'faces' => $typography_mixed_fonts,
                'styles' => false )
            );

I am not getting the fonts listed in $os_faces array, in the drop down list of theme option panel. But the following defaults fonts are showing. View the image below. Please help.

Read more here: Google font doesn’t show in theme option


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: