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フォントを確実に描画する方法