p5.jsでGoogle Fontsの使い方

p5.jsでのGoogle Fontsの使い方です。
Google Fontsを使おうとなったらいつも忘れているナンバー１です。
毎回調べていてイヤになります（汗）。

p5.jsのeditorの場合

1. GoogleFontsページ（https://fonts.google.com/）を開く
2. Fontをダウンロード（Get Font）する
3. editorでfontsフォルダをつくる
4. fontsフォルダにフォントをアップロードする（.ttf）
5. フォントを読み込む変数を定義する（let font;）
6. preload関数を作りloadFont()でフォントを読み込む
7. textFont(font)でフォントを設定する

p5.js Editor

コード例

確認用に作ってみました。

p5.js Editorで確認用サンプルを見る

let font;

function preload() {
  font = loadFont("fonts/DelaGothicOne-Regular.ttf");
}

function draw() {
  background(220);
  textAlign(CENTER, CENTER);
  textSize(60);
  textFont(font);
  fill(255);
  text("gravity", width / 2, height / 2);
}

Generative Design with p5.js - [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング