[BUG] Fonts do not render properly after reloading the page until the scene with text drawings is visited twice or the "Drawing Tools" button is clicked.

[kimitsu]

Module Version: v0.1.0

Describe the bug Fonts do not render properly after reloading the page until the scene with text drawings is visited twice or the "Drawing Tools" button is clicked.

To Reproduce Steps to reproduce the behavior:

1. Add some text drawings on a few scenes, set their fonts to the custom google fonts.
2. Reload the page in your browser (tested in Electron, Chrome and Firefox)
3. The fonts on the landing page look like Signika.
4. Switch to other Scene. The fonts on that scene also look like Signika.
5. Switch back to Scene 1. The fonts are now properly rendered as your custom google fonts.
6. Switch back to Scene 2. The fonts are now properly rendered as your custom google fonts.
7. Switch back to Scene 3. The fonts look like Signika.
8. Press "Drawing Tools" button. The fonts are now properly rendered as your custom google fonts.

Expected behavior I kinda hoped it is possible to draw fonts properly for each scene whenever it is rendered. It would be weird to tell your players to switch scenes back and forth to render the proper fonts.

Browser: Electron, Chrome, Firefox

Foundry Version: 0.6.5

Game System: dnd5e 0.93

Additional context

[kimitsu]

I went in a little bit of debugging and one thing I noticed is that this: if (canvas) { fontEl.on('load', () => { this.drawDrawings(); if (options.settings) { ui.notifications.info(game.i18n.localize('ForienCustomFonts.Notifications.FontAdded'), {permanent: true}); } }); is usually run when canvas is still null. But I don't think that's really the cause of the issue: even after you redraw the text with proper fonts on one scene, the fonts are still broken for another scene.

[shawndibble]

The main issue is with calling this.drawDrawings() before the font has fully rendered.

https://github.com/Forien/foundryvtt-forien-custom-fonts/blob/1a06677fc1042a649c6339b55cd5d29fee7cfd19/modules/Fonts.js#L28-L37

If I move the if statement to after you append the font and then wait a few seconds after the font's onLoad has been called it works. It would be better if it listened for when the font was fully rendered. Here is my current workaround for those lines:

    fontEl.attr('rel', `stylesheet`);
    fontEl.attr('type', `text/css`);
    fontEl.attr('media', `all`);
    fontEl.attr('href', `https://fonts.googleapis.com/css2?${fonts}&display=swap`);
    $('head').append(fontEl);
    //if (canvas) {
      fontEl.on('load', () => {
        setTimeout(() => this.drawDrawings(), 10000);

        if (options.settings) {
          ui.notifications.info(game.i18n.localize('ForienCustomFonts.Notifications.FontAdded'), {permanent: true});
        }
      });
    //}