CODEWITHSUNDEEP
webfonts
Keith Power
Keith Power

Reputation: 14141

Web Font Loader multiple font weights

I am using Web Font Loader to load a font from Google webfonts but it seems to only load the 400 weight. I wish to included 300, 400, 700 but cannot find a way to do it.

  WebFontConfig = {
    google: { 
      families: ['Open Sans'] 
    }
  };

  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

Upvotes: 5

Views: 6446

Answers (2)

kamel B
kamel B

Reputation: 313

As mentionned by Keith Power, you have to add types. But to get it work with all providers (and most important with your custom font), you have to use the Font Variation Description :

WebFontConfig = {
  custom: {
    families: ['My Font', 'My Other Font:n4,i4,n7'],
  }
};
  • n4 : regular
  • n7 : bold
  • i4 : italic
  • i7 : bold-italic
  • ...

Upvotes: 2

Keith Power
Keith Power

Reputation: 14141

I found this solution which worked.

  WebFontConfig = {
    google: { 
      families: ['Open Sans:300,400,700']
    },

Upvotes: 19

Related Questions