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.
