といっても特に変わった事をする必要も無く、CSSでWeb Fontsを定義して、Canvasのfontプロパティに定義した名前をセットするだけ。
@font-face{ font-family: MadoMagi; src: url('./MadokaRunes.ttf') format("truetype"); }
ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "32px MadoMagi ";
https://nullpon.moe/dev/sample/css/webfont/
こちらのサイトのソースを見てもらえば分かるが、ページのローディング時のCanvasへの書き込みは、jQueryのdocument.readyイベントではなくwindow.loadイベントで行っている。これはdocument.readyイベントではWebFontsが適用されなかったためだ。
document.readyのイベントハンドラは、実際にはブラウザのdocument.DOMContentLoadedイベントをトリガーに実行される。これはHTMLを読み込んで解析し、DOMツリーの構築が終わった段階だ。おそらく、この時点ではまだWebFontsの読み込みが行われておらず、フォントを適用することができないのだろう。
同じように画像もreadyイベントでcanvasに書き出すことができなかった。フォントや画像のようなリソースをJavaScriptから利用する場合、document.DOMContentLoadedイベントでは扱わず、window.loadイベント以降で扱うのが正解のようだ。