p5.js Web Editorでフォントを指定する

p5.jsはWeb Editorを使って，手軽にプログラミングを試すことができて，良いのですがフォントの指定がp5.jsのreferenceに従って試してもエラーになります。

Reference

p5.jsのReference loadFont()によると，

let myFont;
function preload() {
  myFont = loadFont('assets/inconsolata.otf');
}

function setup() {
  fill('#ED225D');
  textFont(myFont);
  textSize(36);
  text('p5*js', 10, 50);
}

でフォントの指定ができるように記述されています。しかし，Web Editorにcopyして試すと，consoleに以下のようなエラーが表示されてしまいます。

🌸 p5.js says: It looks like there was a problem loading your font. Try checking if the file path (assets/inconsolata.otf) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)
parseBuffer@https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js:51306:25

対策

検索してみると，loadFont()が効いてない！？という時でも Fontファイルを読み込んで使う２つの方法という記事が見付かりました。この記事を参考にしてみます。

htmlのヘッダでフォントを読込む

Google Fontsの使い方や利用方法を参考に利用したいフォントを選びます。

試しに特徴のあるmonotonフォントを選んでみます。

+ select this style

をクリックすると，フォントを利用するためのコードが得られます。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet"> 

これをindex.htmlに追加します。Web Editor の実行ボタン下にある">"をクリックします。

スケッチファイルの一覧が表示されるので，index.htmlを選択し，ヘッダにGooogle Fontsで指示されたコードを追加します。

index.htmlでフォントを指定したので，loadFont()で読み込みせずにtextFont()で指示します。

Monotonフォントをp5.jsから表示することができました。