How to update Google Fonts array automatically?


#1

Hi guys!

I’m going to load Google Fonts array into every typo select box in theme options. Just curious about how to update the fonts array automatically in a period of time when there is any new font available?

Is it possible in term of automating this? or what’s your suggestion of the proper way?

Thanks in advance for your help. :slight_smile:


#2

read this thread


#3

They have an API:

The problem is that you need an API key, and you can’t expect everyone who buys your theme to get an API key. A workaround is to use the API yourself to grab the JSON array (once a week should be enough). You can then store the JSON on Amazon S3 for your users


#4

You shouldn’t be loading every Google Font imaginable into your themes option panel.


#5

WPExplorer, ofcourse not, he need to load an array of Google Fonts.


#6

Here’s the solution I’m using on one of my themes.

Create a php file on your server and paste the following code with your own API Key:

<?php
$apikey = 'XXXXXX'
$cachefile = 'fonts.json';
$cachetime = 60 * 60;
// Serve from the cache if it is younger than $cachetime
if (file_exists($cachefile) && time() - $cachetime < filemtime($cachefile)) {
	include($cachefile);
	exit;
}
ob_start(); // Start the output buffer

/* The code to get the google web fonts list goes here */
$ch = curl_init('https://www.googleapis.com/webfonts/v1/webfonts?key=' . $apikey);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$content = curl_exec($ch);
echo $content;
curl_close($ch);

// Cache the output to a file
$fp = fopen($cachefile, 'w');
fwrite($fp, ob_get_contents());
fclose($fp);
ob_end_flush(); // Send the output to the browser
?>

This will output the Google Web Fonts list in JSON format and will cache the requests for 1 hour so that the API doesn’t reach the access limit (make sure that the script can write as it creates a file called fonts.json that actually contains the font list as cache).

In your themes you can make an HTTP request to this remote file on your server and filter any fonts you want since this list contains ALL fonts available (this script guarantees that the font list is up to date).

Hope this helps, have fun :smiley:


#7

Forgot to say that when your theme accesses this remote file on your server it should cache the results (using transients for example) so that hundreds of your client’s themes don’t hammer your server.


#8
Pixelous said

WPExplorer, ofcourse not, he need to load an array of Google Fonts.

No I mean. You should add all those font options into the theme panel, period.


#9
unisphere said

Here’s the solution I’m using on one of my themes.

Shorter version:

$apikey = 'XXXXXX'
$cachefile = 'fonts.json';
$cachetime = 60 * 60;
// Serve from the cache if it is younger than $cachetime
if (file_exists($cachefile) && time() - $cachetime < filemtime($cachefile)) {
    include($cachefile);
    exit;
}
$content = file_get_contents('https://www.googleapis.com/webfonts/v1/webfonts?key=' . $apikey);
file_put_contents($cachefile,$content);

#10

Thanks so much everyone! Also, the solution @unisphere suggested is just awesome! :smiley:

I’m going to try it out. :wink:


#11

Try sticking to the api whenever possible

//get webfonts json
//http://codex.wordpress.org/Function_API/wp_remote_post
$fonts = wp_remote_post('https://www.googleapis.com/webfonts/v1/webfonts');

//cache to theme for faster access
//http://codex.wordpress.org/Filesystem_API
$url = wp_nonce_url('foo','bar');
$creds = request_filesystem_credentials($url, '', false, false, null);
if(!WP_Filesystem($creds)) {
	return true;
} else {
	global $wp_filesystem;
	if ( ! $wp_filesystem->put_contents( get_template_directory() . '/cache/fonts.json', $fonts, FS_CHMOD_FILE) ) {
	    return true;
	}
}