Dynamically Load fonts

May be a bit late, but I accomplished it using Google's WebfontLoader Library. It did the job for me.

This is how I implemented:

Step 1: Include the JS file of the library

Step 2: The below code did the trick for me

WebFont.load({
google: {
  families: ['Droid Sans']
},
timeout:5000,
fontactive: function(familyName,fvd){ //This is called once font has been rendered in browser
    // Your business logic goes here

  },
});

You can also load custom fonts apart from google fonts. Library also provides various callback functions and other cool stuffs. You can check out the above link.

Unfortunately loading a font is not supported 100% by JavaScript. but there is a work about this to support it in future:

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API https://drafts.csswg.org/css-font-loading/

You can now use the Font Loading API to detect when all fonts have been loaded. This should work in most modern browsers.

// Wait until all fonts are loaded:
document.fonts.ready.then(() => init());