get all available fonts from google font api
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 html page