Callback on font download

[Sashkan]

I'm using this wonderful font picker to change the font of a canvas element. Unfortunately, the font change is triggered as soon as I pick a new font, therefore, even if it is not completely downloaded, it will be partially applied to my canvas element. (like, half the letters will have the correct font, the other ones will have a fallback browser font).

Is there a way to make sure the font is completely downloaded before using it for anything else ?

[samuelmeuli]

The font picker adds fonts to the document using <style> tags, which – compared to <link> tags – unfortunately can't have an onload attribute.

Instead, you could use document.fonts.onloadingdone to get notified whenever a font finishes loading (see this answer on SO).

[prakis]

I am using FontFaceObserver as mentioned in
#38

its working great.

Also,
#17

[jhgeluk]

How should I implement the FontFaceObserver as mentioned in #38? Do I need to fork this repository? Or is there an easier way? @prakis

[prakis]

You need to install FontFaceObserver in your project.

npm install fontfaceobserver

Then in your code wherever you are loading your font, you can wait till the font is loaded as

var font = new FontFaceObserver('My Family', {
weight: 400
});

font.load().then(function () {
console.log('Font is loaded, can be used now');
}, function () {
console.log('Font is not available');
});

[jhgeluk]

Thanks alot! Seems to be working now for the most part. Still throws the error after remounting the component whilst the fonts are already loaded from the previous mount (if that makes sense).