Forum for discussing general topics related to Couch.
4 posts Page 1 of 1
Hi All,

Wondering if anyone might be familiar with the Google Font API, what I am wondering is if it's possible to pull the font list into a site_style.php to allow the client to select a font for the likes of:

Heading
Body
Blockquote

I've taken a look at this
http://phat-reaction.com/googlefonts.php
and it returns a sweet array of all fonts I'm just not sure how I would pul this into, for example fonts.php then format it in a list that could be used in a dropdown field, i.e.

Once we have the full list in an array, throw the "font name" into a select field as the "option name", then then the "font+name" as the value also.

Basically to get this working we'd need "Font Name" to declare in a stylesheet (via couch <cms:show font_family_name />" and the url version to build into out link to googles font api i.e.

<link href='http://fonts.googleapis.com/css?family=FONT+NAME' rel='stylesheet' type='text/css'>


where font name is <cms:show font_family_url_name />

Hope that makes sense?
It is definitely doable, but I find the approach questionable:
Code: Select all
<cms:editable name='font_family_name' label='Font Family' dynamic='opt_values' opt_values='font-list.html' type='dropdown'/>
Create a snippet file 'font-list.html' with the following contents:
Code: Select all
<cms:php>
$fontsSerialized = @file_get_contents('http://phat-reaction.com/googlefonts.php?format=php');

if (strpos($http_response_header[0], "200")) {
   $fontArray = unserialize($fontsSerialized);

   foreach ($fontArray as $i) {
      echo $i['font-name'] . " | ";
   }
}
</cms:php>
Usage:
Code: Select all
<link href="http://fonts.googleapis.com/css?family=<cms:php>
   echo str_replace(' ', '+', '<cms:show font_family_name/>');
</cms:php>" rel="stylesheet" type="text/css">

<style>
selector {
   font-family: "<cms:show font_family_name/>";
}
</style>
Nevertheless I would caution against using this code before KK sees it and possibly supplies some edits. I am not certain of the security ramifications of unserializing from a third-party website. The list was last updated 2011/12/1 which makes me question whether or not it will be updated again. It also is unnecessarily slow to make a request to that website every time you edit a cloned page in the admin panel.

If I was doing this I might just instruct the client to visit the Google fonts website and have them type the name of a font in a text editable region. If this font name contained a space, we could use PHP to replace it with a plus sign. Seems like less trouble...
@cheesypoof, I cannot comment on the security part as it really is upto the developer to decide if he is willing to trust the third-part site he is pulling data from.

As for the performance issue you rightly mentioned, I think a little caching can solve that.
Here is the modified 'font-list.html' snippet that first looks for a cached list before downloading the font's list:
Code: Select all
<cms:php>
    $cache_folder = K_SITE_DIR . 'cache' . '/'; // Make sure this 'cache' folder exists and has 777 permissions
    $cache_file = $cache_folder . 'fonts.txt';
    $max_cache_time = 7 * 24 * 60 * 60; // 7 days (expressed in seconds)

    $time_last_cached = file_exists( $cache_file ) ? @filemtime( $cache_file ) : 0;
    if( (time() - $max_cache_time) < $time_last_cached ){
        // Cached version is still valid
        $fontsSerialized = file_get_contents( $cache_file );
    }
    else{
        // Fetch from source and then cache it
        $fontsSerialized = @file_get_contents('http://phat-reaction.com/googlefonts.php?format=php');
        if( $fontsSerialized ){
            $handle = @fopen( $cache_file, 'w' );
            fwrite( $handle, $fontsSerialized );
            fclose( $handle );
        }
    }

    $fontArray = @unserialize( $fontsSerialized );
    if( is_array($fontArray) ){
        foreach ($fontArray as $i) {
          echo $i['font-name'] . " | ";
        }
    }
</cms:php>

Hope Patrick lets us know if the solution helps.
@cheesypoof & KK

Thank you for the detailed replies, you guys rock!

I can confirm this works however I will need to do a bit of work on it, I want to limit fonts to Sans Serif and work on some kind of preview for the fonts. The code you supplied is an excellent starting point for me, thanks again :)
4 posts Page 1 of 1