canvasでWebフォントを読み込む前にデバイスフォントが表示されてしまう問題

Web Font Loaderを使用
この手法だとcanvasとか関係ないけど。

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>

Webフォントが読み込まれるまではbodyを表示しない

@font-face {
    font-family:"MyFont";
    src:url("./fonts/GillSansMTStd-UltraBold.otf") format("opentype");
}
.font-loading{
    opacity: 0;
}

以下をindex.jsなどにimport

WebFontChecker.js

export default class WebFontChecker {

    constructor () {}

    start(){

        WebFont.load({
            custom: {
                families: [ 'MyFont' ],
                urls: [
                    './fonts/GillSansMTStd-UltraBold.otf'
                ]
            },
            loading: function() {
                // load start
                console.log("web font load start");
            },
            active: function() {
                // ok
                console.log("web font available");
                $('body').removeClass('font-loading'); // body表示
            },
            inactive: function() {
                // not support
                console.log("not suppport");
            },
            fontloading: function(fontFamily, fontDescription) {
                // load start
                console.log("font-family load start");
            },
            fontactive: function(fontFamily, fontDescription) {
                // ok
                console.log("font-family available");
            },
            fontinactive: function(fontFamily, fontDescription) {
                // not support
                console.log("not suppport");
            }
        });
        
    }

}

参考
ウェブ・フォントの読み込み
Webフォントがいつ読み込まれたかを判断したい場合は、WebFont Loaderを使おう
↓ measureText()を使えばこうなる
canvas要素にwebフォントを確実に描画する方法