fix custom font (custom shapes example) not working

[eviltik]

(master & dev branch)

We can see an Arial font used rather than the targeted one (Gochi Hand)

https://niksgames.com/webxr/dev/CanvasUI/shaped/

[eviltik]

I've tested setTimeout 1s before app initialization, so we are sure the fond is loaded: no change.

The only easy/quick way i found to fix that is to add a div with the font familly and at least one char, after body tag

<div style="font-family: Gochi Hand;position:absolute;z-index:-1">. </div>

[eviltik]

Another test using local font strategy : no change

<link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap" rel="stylesheet">
<style>
    @font-face {
        font-family: 'Gochi Hand';
        src: local('Gochi Hand');
    }
</style>

[eviltik]

Another way to fix :

<script type="module">

import { App } from './app.js';

document.addEventListener("DOMContentLoaded", function() {

        let myFont = new FontFace(
            "Gochi Hand",
            "url(https://fonts.gstatic.com/s/gochihand/v14/hES06XlsOjtJsgCkx1Pkfon_-w.woff2)"
        );

        myFont.load().then(font => {
            document.fonts.add(font);
            const app = new App();
            window.app = app;
        });

    });

</script>

https://caniuse.com/mdn-api_fontface

[eviltik]

@NikLever Seem's the FontFace API is the cleanest way to fix :)

go PR ?

[NikLever]

Looks like a great suggestion

[eviltik]

merged in dev branch

[eviltik]

reopened because not in master