Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

On the Google developer API page, it talks briefly on retrieving a dynamic list of fonts using JSON/JavaScript.

I was wondering how would I be able to pull the web fonts API into my Wordpress theme so that I'm not creating my own list or have to constantly release an update of fonts.

Thank you.

share|improve this question
3  
This really isn't a WordPress question. It is more of a Google API question (spoiler: last I checked, they sadly haven't exposed one for fonts), or a general PHP question. With respect to WordPress, you really are looking for an array of non-WordPress data that includes all Google Fonts, that you can use/manipulate in your Options Framework code. –  Chip Bennett Oct 31 '12 at 2:00
    
You can get the list here: googleapis.com/webfonts/v1/webfonts?sort=alpha … but as Chip said: That is off topic here and answered already on Stack Overflow. –  toscho Oct 31 '12 at 2:12
    
Note: a question that would be on-topic would be how to pull the Google Fonts API json data into WordPress. If you want to re-focus your question accordingly, you'd have a reopen vote from me. –  Chip Bennett Oct 31 '12 at 2:20
1  
Hmm... I'll cast a reopen vote for the effort, but the more universally useful question would be a bit more specific about using JSON data itself (whether from Google API or elsewhere). But, if the question is reopened, we can continue to refine the wording. Otherwise, maybe a separate question is best. –  Chip Bennett Oct 31 '12 at 12:50
1  
@kaiser: the original question was "how do I get a list of Google fonts to use?" As-edited, it is now "how do I get and use this JSON data?" And I'm just waiting for the re-open to add an answer. :) –  Chip Bennett Oct 31 '12 at 14:37

1 Answer 1

up vote 6 down vote accepted

Here is some quick first draft code for populating a dropdown from the Google Font API, I do not know about the options framework so this will not deal with that.

1. Get an API Access Key from Google

Your request will need a valid key, you can follow the instruction here on how to get one: https://developers.google.com/webfonts/docs/developer_api

It's free for a certain request # per day and you also get some cool usage stats with it.

2. Let's use WordPress's HTTP API to get the JSON response

//enter your api key and the Google Font url 
$google_api_url = 
'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyD6j7CsUT89645jlhkdBjnN-5nuuFGU';


//lets fetch it
$response = wp_remote_retrieve_body( wp_remote_get($google_api_url, array('sslverify' => false )));

Notice 'sslverify' => false , this is because Google requires SSL to authorize the API key, you can remove this and it might work, but if you get an SSL verification error (esp on localhost) you can try and set it to false.

3. Loop through the response

Now we have something to work with so let's check for errors and loop through the data that Google returns.

if( is_wp_error( $response ) ) {
   echo 'Something went wrong!';
} else {

// Let's turn the JSON response into something easier to work with
// I guess this part is what really answers the above in terms of WP 
// working with json responses, if anyone knows any better way, do tell

$json_fonts = json_decode($response,  true);
// that's it

$items = $json_fonts['items'];
$i = 0;
foreach ($items as $item) {
$i++;
$str = $item['family']; //I guess we want the font family

The above simply returns the font family, but there is a lot more data returned via the Googsy, for example the font-weight choice and also a bunch of font subsets, I have left that out to keep this example simple. Also you probably should use javascript instead of PHP, but let's not deal with that (you can enqueue wp-includes/js/json2.js ).

4. Output

Now we have a list fonts of which are output in a loop via $str , you could add them to a input box with something like <option value="<?php echo $str; ?>"><?php echo $str; ?></option>; , yes it's kinda of ghetto but it will look like:
enter image description here

You probably want to put that info inside one of the option frameworks fields or something.

5. Now we need to actually get the font we select

Since we set the input value to the fonts name that is more or less all Googsy wants, well kinda, that part above where I eliminated font subsets and weights will cause some issues, so you will need to extend that loop to include the data you want!

So now we make the dropdown select grabs the input and append it to the CSS Google API url, which look like http://fonts.googleapis.com/css?family= ..your font name +stuff ....

For example: http://fonts.googleapis.com/css?family=Anonymous+Pro

There are a lot of things I did not go over here such as storing the values using the Transients_API because Google updates the font collection often and we don't need to keep pounding them for the same info.

Also using some build in function like wp_list_pluck to pick your fonts out of the list.

ps. I didn't finish the code for part 5 because I'm hungry so hopefully this sets you on the right track.

share|improve this answer
    
Well, this pretty much covers it. :) –  Chip Bennett Nov 2 '12 at 0:34
1  
My answer was to explain how to do it, it's not meant to be plugin because I don't have the time. There needs to be a better request check (if google timeouts), caching, and actually using the data to do something. You also need a better loop to return the font variants so it will actually work, here is my complete example that populated the dropdown pastebin.com/gKqRG57N you'r missing actual output in your code, but again this is not meant to be a copy/paste. –  Wyck Nov 2 '12 at 20:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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