p5.js の WEBGLモードで Google Fonts の Webフォントを利用する（loadFont()を使って CDN から読み込む）

以下の記事で扱った内容とキーワード的には少し共通点がある、Google Fonts の Webフォントに関する記事です。

●【完走賞ゲット-1】p5.js Web Editor で Google Fonts の絵文字の Webフォントを利用する - Qiita
　https://qiita.com/youtoy/items/34920d8a49f45653d77a

ただし、今回の記事の内容は、上記の記事の内容とは違っているところがあります。
上記では、HTMLファイルで Webフォントを読み込んでいましたが、この記事では、JavaScript の中で Webフォントを読み込むやり方になります。それに関して、この後に書いていきます。

プログラム

それでは、まずは今回のテスト用に作ったプログラムを掲載します。
ここで JavaScript で Webフォントを読み込んでいますが、そこで利用しているのは fonts.gstatic.com に置かれた OpenTypeフォントです。

let myFont;

function preload() {
  const url =
    "https://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf";
  myFont = loadFont(url);
}

function setup() {
  createCanvas(400, 400, WEBGL);

  textFont(myFont);
  textSize(30);
}

function draw() {
  background(50);

  text("test", -50, 0);
}

上記を実行すると、WEBGLモードのキャンバスで、文字を表示することができました。

ちなみに、上記のような Webフォントの読み込みなどを行わず text() を利用しようとすると、WEBGLモードを利用している場合は loadFont や textFont を利用するようにという、以下のメッセージが出ます。

OpenTypeフォントのファイルを自分で配置するやり方もありますが、オンラインで読み込めると楽で良いです。

フォントの読み込み方の違い

過去の記事で Webフォントを読み込んだ時との違いについて、少し説明します。

過去の記事では、以下のように HTMLファイルの中で読み込みをしていました。

また、ここで href属性に指定している URL もファイルを直接リンクするようなものにはなっていません。

なお、ここで href属性に指定している URL である https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap に、ブラウザでアクセスしてみると、以下のような内容が読み込まれていることが分かります。

参照した情報

今回の記事に書いた内容に関して、参照した記事を掲載します。

• p5.jsのWEBGLモードにするとtext();が表示されない
• Noto Sans Japaneseを利用する(cdn利用) – Share-Snippet-Code