Google API fonts in a select box

Question

https://stackoverflow.com/q/5065542/1716774
I like to apply the same function in my Fiddle

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);
    });​

I tried to add the google API fonts in my select box by using

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

how to add this to my fiddle

Answer 1

Use a JSONP request and add each returned font to a select:

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=API_KEY&callback=SetFonts';
document.body.appendChild(script);

Answer 2

The Google Fonts API call returns JSON, so you would need JavaScript to iterate over the JSON result and populate the SELECT with it. Also, when the user selects one of the fonts, you would need to dynamically include the correct script from Google using the item the user has selected. Read this part of the API docs for details on how to do that.