Load multiple weight custom font with the webfont loader

Question

When defining a custom font with the webfont loader (repo here), we basically define the families loaded and the related URLs:

WebFont.load({
    custom: {
        families : [ "My font" ],
        urls     : [ "assets/css/fonts.css" ]
    }
});

But, it seems the loader don't detect multiple weight defined for the same font in the css file:

@font-face {
  font-family: 'My font';
  src: url("../fonts/my-font.eot");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'My font';
  src: url("../fonts/my-font.eot");
  font-weight: bold;
  font-style: normal;
}

And so, the loader trigger the active event when the first font is loaded. This can be confirmed if we check the fontactive event who'll only be triggered once:

WebFont.load({
    fontactive: function( fontname, fontdescription ) {
        console.log( fontname, fontdescription );
        // Only trigger once `My font, n4`
    }
});

So, is there a way tell the webfont loader there's multiple weight to get (a bit like their google webfonts interface)?

(A fix can be to use multiple names for each font weight, but that's not the solution I'm searching for here)

Are you sure that the fontactive event is not supposed to be triggered only triggered once, when both weights have been loaded? In my tests, both the regular and bold weights of the font were loaded, and the load callback was just made once. — Jonathan Nicol

Bram Stein Bram Stein · Accepted Answer · 2013-04-01T07:14:24

I'm one of the developers of the webfontloader. You are correct that the custom module does not support loading multiple variations. Luckily we recently added support for this, so if you upgrade your version of the webfontloader (or use the one on the Google CDN) you'll get support for it.

You can use it like:

WebFont.load({
  custom: {
    families: ['My Font', 'My Other Font:n4,i4,n7'],
    urls: ['/fonts.css']
  }
});

To load the 'n4', 'i4' and 'n7' variations of "My Other Font".

Load multiple weight custom font with the webfont loader

1 Answers