1

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.enter image description here Please help.

1

You forgot this step, which mixes together the system and Google fonts:

$typography_mixed_fonts = array_merge( 
    options_typography_get_os_fonts(), 
    options_typography_get_google_fonts()
);
asort( $typography_mixed_fonts );
  • next time just edit without vote down im bad in english i wante just help – Mwordpress Feb 10 '15 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.