Browsers: Is it possible to to reload font without refreshing page?

Question

Consider an app that renders something on a canvas. There is the following scenario: A user loads applications and uses it for some time. He goes to some different views or changes the used font but the font can not be loaded because of no connection issue or timeout. After some time the connection is back and we could load the font for the user.

Is it possible to load the font again? I tried to inject again font-face CSS and wait for the font to be loaded (using FontFaceObserver ) but the browser remembers state when font loading failed.

One more requirement: User can choose from many fonts (around 100) so I do not want to load all of them on initialization - fonts should be loaded on demand.

Answer 1

I think your problem can be solved using Google's Web Font Loader Library, below is the link for reference: https://github.com/typekit/webfontloader Steps to use:

• Include JS file to the library
• Add below code block in JS loader:

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