How do i check the load of an external font

Question

I have a very strange problem and I'm not even sure if its the right angle but here comes the setup:

link to a google font in the head;

onload: function x() to render the font in a canvas;

onclick: x();

since the onload renders the text in a standard font and the onclick execution of the same function work perfectly, I'm thinking the font is not fully loaded on the first execution. so i was wondering if there was a way to check the loading progress of an external font.

Answer 1

Have you looked at the Google Fonts API, particularly the section 'Acting on events'?