When using WebFont loader, how to hardcode the css?

Question

To load a font with WebFont, I do as they suggest here: https://developers.google.com/fonts/docs/webfont_loader

WebFontConfig = {
    custom: { families: ['font1', 'font2', 'font3'],
    urls: [ 'stylesheets/fonts.css' ] },
    loading: function(){
        console.log('loaded');
    },
    inactive: function(){
        console.log('not loaded');
    }
};
WebFont.load(WebFontConfig);

But this mean that the broswer wait the download of the css file before it starts loading the fonts.The css is just a few lines of code and i don't see why I could not paste it directly in the js.

Anyone knowes how to achieve that ?

Answer 1

This is simply not possible ; the detection starts when the download of the css is done.

Answer 2

How about download the font and use @font-face in your CSS, like this

@font-face {
  font-family: "Gang-of-Three";
  src: url("fonts/gangofthree.ttf")
  }