CODEWITHSUNDEEP
javascriptjqueryfontsgoogle-api
Meules
Meules

Reputation: 1389

Load only specific fonts from Google API

I succesfully setup a selectbox with fonts loaded from the Google API. When changing the selectbox my textarea changes the font aswell.

There's only one thing left I can't figure out. How do you load only specific fonts from the API, so not the complete list with 700+ fonts?!

I can't find anywhere in the docs where to set the fonts you want to load.

What I have is this:

In the <head> this code with the 6 fonts I want:

 <script>
   WebFontConfig = {
    google: { families: [ 'Cookie', 'Dekko', 'Ruge+Boogie', 'Great+vibes', 'Cabin', 'Open+Sans' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
    </script>

In my <body>:

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

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

Upvotes: 2

Views: 367

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

do you mean something like this?

WebFontConfig = {
  google: { families: [ 'Cookie', 'Dekko', 'Ruge+Boogie', 'Great+vibes', 'Cabin', 'Open+Sans' ] }
};

function SetFonts(fonts) {
  var loadedFonts = [];
  for (var i = 0; i < fonts.items.length; i++) {
    if ((WebFontConfig.google.families.indexOf(fonts.items[i].family) > -1) &&
        (loadedFonts.indexOf(fonts.items[i].family) === -1)) {
      $('.styleFont').append($("<option></option>").attr("value", fonts.items[i].family).text(fonts.items[i].family));
      loadedFonts.push(fonts.items[i].family);
    }
  }
}

Upvotes: 1

Related Questions