How to load cutom fonts such as 'Tondo' using WbfontLoader?

Question

I need to load fonts (.eot,.ttf etc) on demand as per the requirement.

WebFont.load({
    custom: {
        families: ['Font1'],
        urls: ['css-path']
    }
});

I am unable to do it using above approach. One of the solution i found out to create style element and add the @font-face like this -

const cssStr = `
                 @font-face {
                     font-family: Tondo;
                    src: url(../static-assets/common/fonts/tondo/tondo-light-webfont.eot);
                  }`
const style = document.createElement('style');
                style.innerHTML = cssStr;
                document.head.appendChild( style );

Is there any better way to do it?