How to add Google Web Fonts with Font Preview in WordPress without Plugins

Unlike the usual and most common use fonts like Arial, Verdana, Tahoma and Helvetica. Google Web Fonts are more beautiful, readable, accessible and modern. Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers.

There’s already a tons of Google Web Fonts WordPress plugins out there like WP Google Fonts, Google Fonts Manager and Google Web Font for WordPress. There’s also a paid premium Google Web Fonts WordPress Plugin such as Ultimate Google Web Fonts but today i am going to show you an easy step by step on ‘How to add Google Web Fonts with Font Preview in WordPress without Plugins’.

I will be creating a Google web fonts options panel with font preview in WordPress dashboard menu. First thing you need to do is create a blank PHP and name it gwf-options.php and upload it to your current theme root. wp-content/themes/current-theme/gwf-options.php

After that, open your functions.php and add this line of code at the bottom of the php before closing ?>

include( get_template_directory() . '/gwf-options.php');

that’s easy right?, and now we will begin the more important part of the tutorial.

Table of Contents

Step 1 – Create the menu and sub-menu page

We will be creating a menu and sub-menu for the GWF options. GWF setting page for the fonts option selection with font preview and the other are the GWF update page for the Google web fonts list update.

Start by adding below code into the newly created gwf-options.php
[php]
///////////////////////////////////////////////////////////////////////
// Create the Google Web Fonts Dashboard Menu
///////////////////////////////////////////////////////////////////////
function register_google_webfonts_menu(){
/* add main menu for GWF */
add_menu_page( ‘Google Web Fonts’, ‘GW Fonts’, ‘manage_options’, ‘google-fonts-settings’, ‘wp_gwf_fonts_settings’, get_template_directory_uri() . ‘/google.png’ , 100 );

/* add sub menu – settings for GWF */
add_submenu_page(‘google-fonts-settings’, ‘GWF Settings’, ‘GWF Settings Page’, ‘manage_options’, ‘google-fonts-settings’, ‘wp_gwf_fonts_settings’);

/* add sub menu – updates for GWF */
add_submenu_page(‘google-fonts-settings’, ‘GWF Update’, ‘GWF Update Page’, ‘manage_options’, ‘google-fonts-update’, ‘wp_gwf_fonts_update’);

}
add_action( ‘admin_menu’, ‘register_google_webfonts_menu’ );
[/php]

as you can see there’s 2 functions ( wp_gwf_fonts_settings() and wp_gwf_fonts_update() ) needed to create to prevent any warning error function not found notice which i will cover in later part of the tutorial.

[notice type=”info”]You can download the admin menu icon google.png here.[/notice]

Step 2 – Create a function to fetch Google web fonts family list

We will be using this function to get a list of available Google web fonts family list in array to be added to options selection later on.

[php]///////////////////////////////////////////////////////////////////////
// Fetch the Google Web Fonts API list
///////////////////////////////////////////////////////////////////////
if( !function_exists(‘wp_get_google_webfonts_list’) ):
function wp_get_google_webfonts_list($key=”, $sort=”) {
/*
$key = Web Fonts Developer API
$sort=
alpha: Sort the list alphabetically
date: Sort the list by date added (most recent font added or updated first)
popularity: Sort the list by popularity (most popular family first)
style: Sort the list by number of styles available (family with most styles first)
trending: Sort the list by families seeing growth in usage (family seeing the most growth first)
*/

$http = (!empty($_SERVER[‘HTTPS’])) ? "https" : "http";

$google_api_url = ‘https://www.googleapis.com/webfonts/v1/webfonts?key=’ . $key . ‘&sort=’ . $sort;
//lets fetch it
$response = wp_remote_retrieve_body( wp_remote_get($google_api_url, array(‘sslverify’ => false )));
if( is_wp_error( $response ) ) {
} else {
$data = json_decode($response, true);
$items = $data[‘items’];
foreach ($items as $item) {
$font_list[] .= $item[‘family’];
}
}
//Return the saved lit of Google Web Fonts
return $font_list;
}
endif;[/php]

Step 3 – Preparing wp_gwf_fonts_settings()

Just as mention in step 1, There are two functions need to be created for the menu and sub-menu panel. Here we will be creating the setting page for the GWF options. First we need to add a global variable to used later in other functions.

[php]////////////////////////////////////////////////////////////////////
// Create the settings page for GWF
/////////////////////////////////////////////////////////////////////////

// this will store the google web font family list
$get_font_transiet = get_transient( ‘wp_gwf_list_save’ );

// the setting input for GWF options
$gwf_options = array (

array(
"header-title" => __("Google Web Fonts Settings", TEMPLATE_DOMAIN),
"name" => __("Body Font", TEMPLATE_DOMAIN),
"description" => __("Choose a font for the body text.", TEMPLATE_DOMAIN),
"id" => "_body_font",
"type" => "select",
"options" => $get_font_transiet,
"default" => ""),

array(
"name" => __("Headline Font", TEMPLATE_DOMAIN),
"description" => __("Choose a font for the headline h1,h2,h3,h4,h5,h6 text.", TEMPLATE_DOMAIN),
"id" => "_headline_font",
"type" => "select",
"options" => $get_font_transiet,
"default" => ""),

);[/php]

and now adding the wp_gwf_fonts_settings()

[php]
function wp_gwf_fonts_settings() {
global $get_font_transiet, $gwf_options;
if ( $_GET[‘page’] == ‘google-fonts-settings’ ) {

if ( ‘save’ == $_REQUEST[‘action’] ) {
foreach ($gwf_options as $value) {
update_option( $value[‘id’], $_REQUEST[ $value[‘id’] ] );
}
foreach ($gwf_options as $value) {
if( isset( $_REQUEST[ $value[‘id’] ] ) ) { update_option( $value[‘id’], $_REQUEST[ $value[‘id’] ] ); } else { delete_option( $value[‘id’] ); }
}

echo "<SCRIPT LANGUAGE=’JavaScript’>
window.location=’". admin_url(‘/’). "admin.php?page=google-fonts-settings&saved=true" . "’;
</script>";

} else if( ‘reset’ == $_REQUEST[‘action’] ) {

foreach ($gwf_options as $value) {
delete_option( $value[‘id’] );
}

echo "<SCRIPT LANGUAGE=’JavaScript’>
window.location=’". admin_url(‘/’). "admin.php?page=google-fonts-settings&reset=true" . "’;
</script>";

}

}
?>

<div id="custom-theme-option" class="wrap">
<?php screen_icon(‘upload’); echo "<h2>" . __( ‘GW Fonts Options’, TEMPLATE_DOMAIN ) . "</h2>"; ?>
<?php
if ( $_REQUEST[‘saved’] ) echo ‘<div class="updated fade"><p><strong>’. __(‘GWF settings saved.’, TEMPLATE_DOMAIN) . ‘</strong></p></div>’;
if ( $_REQUEST[‘reset’] ) echo ‘<div class="updated fade"><p><strong>’. __(‘GWF settings reset.’, TEMPLATE_DOMAIN) . ‘</strong></p></div>’;

if($get_font_transiet == FALSE):
echo ‘<div class="updated fade"><p><strong>’. __(‘You need to update or save the google font list first.’, TEMPLATE_DOMAIN) . ‘</strong></p></div>’;
else:
?>

<?php foreach ($gwf_options as $value) { ?>

<?php if ( $value[‘header-title’] != "" ) { ?>
<tr class="trtitle" valign="top"><th scope="row">
<h3><?php echo stripslashes($value[‘header-title’]); ?></h3></th></tr>
<?php } ?>

<?php if ( $value[‘type’] == "select" ) { ?>

<tr class="<?php echo $value[‘hide_blk’]; ?>" valign="top"><th scope="row"><?php echo $value[‘name’]; ?></th>
<td>
<select name="<?php echo $value[‘id’]; ?>" id="<?php echo $value[‘id’]; ?>">
<?php foreach ( $value[‘options’] as $option ) { ?>
<option<?php if ( get_option( $value[‘id’] ) == $option) { echo ‘ selected="selected"’; } elseif ($option == $value[‘default’]) { echo ‘ selected="selected"’; } ?>><?php echo $option; ?></option>
<?php } ?>
</select>
<div style="border:1px solid #ddd;margin:20px 0 0;width:400px;padding:20px;background:#f8f8f8;" class="testtextbox" id="testtext<?php echo $value[‘id’]; ?>">The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890</div>
<br />
<label class="description" for="<?php echo $value[‘id’]; ?>"><?php echo $value[‘description’]; ?></label>
</td>
</tr>

<?php } ?>

<?php } ?>
</table>

<form method="post">
<div style="float: left; margin: 20px 40px 0 0;" class="submit">
<?php
$alert_message = __("Are you sure you want to delete the fonts options?.", TEMPLATE_DOMAIN ); ?>
<input name="reset" type="submit" class="button-secondary" onclick="return confirm(‘<?php echo $alert_message; ?>’)" value="<?php echo esc_attr(__(‘Reset Setting’,TEMPLATE_DOMAIN)); ?>" />
<input type="hidden" name="action" value="reset" />
</div>
</form>

</div>

<?php endif; }
[/php]

Step 4 – Preparing wp_gwf_fonts_update()

Another function are the Google web fonts update panel. Here you can add your own Web Fonts API and update the available font family list and sort them by alpha, trend or popularity.

[php]
function wp_gwf_fonts_update() {
global $get_font_transiet;
?>
<div id="custom-theme-option" class="wrap">
<?php screen_icon(‘upload’); echo "<h2>" . __(‘Google Web Fonts Family’, TEMPLATE_DOMAIN ) . "</h2>";
if ( $_REQUEST[‘saved’] ) {
echo ‘<div class="updated fade"><p><strong>’. __(‘Google Web Fonts Family Successfully Updated.’, TEMPLATE_DOMAIN) . ‘</strong></p></div>’;
}
?>

<form id="wp-theme-options" method="post" action="" enctype="multipart/form-data">
<?php
//register the $_POST variable
$gwf_font_api = $_POST[‘google-font-dev-api’];
$gwf_font_sort = $_POST[‘google-font-sort’];

//if save button hit
if( $_POST[‘save’] ) {

//if no dev font api set
if( !isset($gwf_font_api) ):
echo ‘<div class="error"><p><strong>’. __(‘Google Web Fonts API not set.’, TEMPLATE_DOMAIN) . ‘</strong></p></div>’;
endif;

update_option(‘google-font-sort’,$gwf_font_sort);
update_option(‘google-font-api’,$gwf_font_api);

$get_gwf_font_api = get_option(‘google-font-sort’);
$get_gwf_font_api = get_option(‘google-font-api’);
$fontlist = wp_get_google_webfonts_list($gwf_font_api, $gwf_font_sort);

// delete and renew transient with expiration for font list
delete_transient( ‘wp_gwf_list_save’ );
set_transient( ‘wp_gwf_list_save’, $fontlist );

// save and store the transient and redirect
echo "<SCRIPT LANGUAGE=’JavaScript’>
window.location=’". admin_url(‘/’). "admin.php?page=google-fonts-update&update=true" . "’;
</script>";

}

if( $get_font_transiet == FALSE ):
echo ‘<div class="updated fade"><p><strong>’. __(‘You need to update or save the google font list first.’, TEMPLATE_DOMAIN) . ‘</strong></p></div>’; ?>

<?php else: ?>

<table class="form-table">
<h3><?php echo count($get_font_transiet); ?> <?php _e(‘available Google Web Fonts’, TEMPLATE_DOMAIN); ?>     <small><a href="#google-font-dev-api">Update the font family below</a></small></h3>
<tr valign="top">
<td>
<?php
foreach($get_font_transiet as $font): ?>
<?php echo ‘<p style="width:250px;height:30px;float:left;margin:0;">’. ucfirst($font) . ‘</p>’; ?>
<?php endforeach; ?>
</td>
</tr>
</table>

<?php endif; ?>

<label><strong><?php _e(‘Enter Your Web Fonts Developer API’, TEMPLATE_DOMAIN); ?></strong></label>  
<input style="width:300px;" id="google-font-dev-api" name="google-font-dev-api" type="text" value="<?php echo get_option(‘google-font-api’); ?>" />
   <label><strong><?php _e(‘Sort by’, TEMPLATE_DOMAIN); ?></strong></label>  <select id="google-font-sort" name="google-font-sort">
<option<?php if ( get_option(‘google-font-sort’) == ‘alpha’) { echo ‘ selected="selected"’; } ?>>alpha</option>
<option<?php if ( get_option(‘google-font-sort’) == ‘date’) { echo ‘ selected="selected"’; } ?>>date</option>
<option<?php if ( get_option(‘google-font-sort’) == ‘popularity’) { echo ‘ selected="selected"’; } ?>>popularity</option>
<option<?php if ( get_option(‘google-font-sort’) == ‘style’) { echo ‘ selected="selected"’; } ?>>style</option>
<option<?php if ( get_option(‘google-font-sort’) == ‘trending’) { echo ‘ selected="selected"’; } ?>>trending</option>
</select>   
</div>

<div style="color:#666;width:100%; float: left; margin: 0;" >
<small>Web Fonts Developer API Example: AIzaSyBmPRa5TGlBRbUUV-pVPU3GxXRkD4lBtUU<br /><br />
alpha: Sort the list alphabetically <br />
date: Sort the list by date added (most recent font added or updated first) <br />
popularity: Sort the list by popularity (most popular family first)
style: Sort the list by number of styles available (family with most styles first) <br />
trending: Sort the list by families seeing growth in usage (family seeing the most growth first)
</small>
</div>

</form>

</div>

<?php } ?>
[/php]

Are we finished? not yet, we need to add 2 more functions for the Font Preview and Google web fonts in site and admin dashboard to work, its quite easy, just add these:

Step 5 – Add hook action for wp_head() and admin_head()

[php]
///////////////////////////////////////////////////////////////////
// get google web font for homepage
///////////////////////////////////////////////////////////////////
if( !function_exists( ‘wp_gwf_header_init’ ) ):
function wp_gwf_header_init(){

$http = (!empty($_SERVER[‘HTTPS’])) ? "https" : "http";
$un_bodytype = get_option(‘_body_font’);
$un_headtype = get_option(‘_headline_font’);
$bodytype = str_replace(‘ ‘ , ‘+’, get_option(‘_body_font’));
$headtype = str_replace(‘ ‘ , ‘+’, get_option(‘_headline_font’));
$font_var = ‘300,400,600,700,900,300italic,400italic,600italic,700italic,900italic’;

if ( $bodytype != "" ){
echo "<link href=’" . $http . "://fonts.googleapis.com/css?family=" . $bodytype . ":" . $font_var . "’ rel=’stylesheet’ type=’text/css’>";
}

if ($headtype != ""){
echo "<link href=’" . $http . "://fonts.googleapis.com/css?family=" . $headtype . ":" . $font_var . "’ rel=’stylesheet’ type=’text/css’>";
}

<?php echo "<style type=’text/css’ media=’all’>"; ?>
body { font-family: <?php echo get_option(‘_body_font’); ?> !important; }
h1,h2,h3,h4,h5,h6 { font-family: <?php echo get_option(‘_headline_font’); ?> !important; }
<?php echo "</style>"; ?>

<?php }

endif;
add_action(‘wp_head’,’wp_gwf_header_init’);
[/php]

and for admin panel font preview

[php]
///////////////////////////////////////////////////////////////////
// get google web font for admin
///////////////////////////////////////////////////////////////////
if( !function_exists( ‘wp_gwf_admin_header_init’ ) ):
function wp_gwf_admin_header_init() {

if ( $_GET[‘page’] == ‘google-fonts-settings’ ) { ?>

WebFontConfig = {
google: { families: [ ”+ val +”, ”+ val2 +” ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})();
});
});
</script>

<?php
$http = (!empty($_SERVER[‘HTTPS’])) ? "https" : "http";
$un_bodytype = get_option(‘_body_font’);
$un_headtype = get_option(‘_headline_font’);
$bodytype = str_replace(‘ ‘ , ‘+’, get_option(‘_body_font’));
$headtype = str_replace(‘ ‘ , ‘+’, get_option(‘_headline_font’));
$font_var = ‘300,400,600,700,900,300italic,400italic,600italic,700italic,900italic’;

if ( $bodytype != "" ){
echo "<link href=’" . $http . "://fonts.googleapis.com/css?family=" . $bodytype . ":" . $font_var . "’ rel=’stylesheet’ type=’text/css’>";
}

if ($headtype != ""){
echo "<link href=’" . $http . "://fonts.googleapis.com/css?family=" . $headtype . ":" . $font_var . "’ rel=’stylesheet’ type=’text/css’>";
}
?>

<?php echo "<style type=’text/css’ media=’all’>"; ?>
<?php if( get_option(‘_body_font’) ): ?>
#testtext<?php echo "_body_font"; ?> {
font-size: 16px; font-family: <?php echo get_option(‘_body_font’); ?>;
}
<?php endif; ?>

<?php if( get_option(‘_body_font’) ): ?>
#testtext<?php echo "_headline_font"; ?> {
font-size: 16px; font-family: <?php echo get_option(‘_headline_font’); ?>;
}
<?php endif; ?>
<?php echo "</style>"; ?>

<?php } }

endif;

add_action(‘admin_head’,’wp_gwf_admin_header_init’);
[/php]

Step 6 – You’re done, start testing

If everything is in place, you should be able to see a GWF Fonts Menu with two sub-menu GWF Fonts settings and GWF Fonts update.

To get started, you need to update the font list in GWF Fonts update sub-menu. If you have your own Web Font API then add in the textfield. if not use the default API included there.

You will see something like this if the font list successfully store in get_transient().

To finalize test, go to GWF Fonts setting and Choose which font you want for body and headline text and save the setting. Finally go to your homepage and see the Google Web Fonts now replaced all your body text and Headline Text.

Don’t like to get your hand dirty?

Felling dizzy and confuse looking at all the codes, just download the source code below and add to your current activated theme root. wp-content/themes/current-themes/–upload here–
and add this to your functions.php file
include( get_template_directory() . '/gwf-options.php');

[notice type=”downloads”]Download GWF Tutorial Source Code
File format: zip File size: 7.31KB[/notice]