Adding google font api to select menu

Question

I am making a select box with all the fonts in google fonts API. I have referred this https://developers.google.com/webfonts/docs/developer_api link to learn more about API but till now i was not able to make it.

I am adding this Fiddle which i made for this.

HTML

       <select id="styleFont">
          <option value="0">Myraid Pro</option>
          <option value="1">Sans ref</option>
          <option value="2">Times New Roman</option>
          <option value="3"> Arial</option>
       </select>
 <br>
  <textarea id="custom_text"></textarea> 

CSS

 #custom_text{ resize: none;}​

Script

      $("#styleFont").change(function () {
     var id =$('#styleFont option' + ':selected').text();    
    $("#custom_text").css('font-family',id);
    });​

My API key is https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo

How can i link those fonts to my select box in the fiddle?

Answer 1

Just use jquery to get the font list, then add each font to your select:

$.getJSON("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo", function(fonts){
    for (var i = 0; i < fonts.items.length; i++) {      
     $('#styleFont')
         .append($("<option></option>")
         .attr("value", fonts.items[i].family)
         .text(fonts.items[i].family));
    }    
});

EDIT: This uses JSONP

function SetFonts(fonts) { 
    for (var i = 0; i < fonts.items.length; i++) {      
     $('#styleFont')
         .append($("<option></option>")
         .attr("value", fonts.items[i].family)
         .text(fonts.items[i].family));
    }    
}
var script = document.createElement('script');
script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo&callback=SetFonts';
document.body.appendChild(script);