javascript - 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

This is an old question, I didn't find anything as good for this as I wanted, so I developed my own selector:

Github https://github.com/maPer77/Select2-Google-Fonts

Demonstration: https://maper77.github.io/Select2-Google-Fonts/

See it working:

selectGfont({
key: 'AIzaSyDlD2NdRw4MDt-jDoTE_Hz3JqNpl154_qo', 
containerFonte: '#selectGFont', 
containerVariante: '#selectGFontVariante',
sort: 'popularity',
onSelectFonte: 'sGFselecionado'
});


sGFselecionado = function(fonte, variante, json){
console.log( 'fonte', fonte );
console.log( 'variante', variante );
console.log( 'json', json );
};

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet">
<link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet">
<link href="https://maper77.github.io/Select2-Google-Fonts/src/selectGfont.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
<script src="https://maper77.github.io/Select2-Google-Fonts/src/selectGfont.min.js"></script>

<div class="row justify-content-center">
<!-- Fonte GOOGLE -->
<div class="col-md-12 col-lg-10 col-xl-8">
<label><span class="selectGFontTotal"></span> Google Fonts</label>
<div class="input-group input-group-lg">
<select id='selectGFont' data-default='Play' class="form-control invisible"></select>
<div class="input-group-append">
<select id='selectGFontVariante' data-default='regular' class="form-control invisible"></select>
</div>
</div>
</div>
</div>