p5.jsでGoogleFontsをダウンロードして使う方法

p5.jsでテキストを使う時、最初のころはフォントは気にしないですよね。

どんなデザインで、どんな動きをさせるのかを考えたり、Referenceを見ながら悩むことに時間を使います。けど、p5.jsに慣れてくると好きなフォントを使いたくなってきます。

フォントを変えたい時にまず思いつくのはGoogle Fontsですよね。
以前の記事でGoogle FontsをCDNで使う方法を「p5.jsでGoogleFontsをCDNで使う方法」に書きました。今回は、Google Fontsをダウンロードして使う方法です。

準備編

1. GoogleFontsページを開く
2. Fontをダウンロード（Get Font）する
3. 「fonts」フォルダをつくる
4. ダウンロードしたフォントをfontsフォルダに入れる（.ttfのファイル）

fonts.google.com

コード編

1. ダウンロードしたフォントを変数に入れる
2. フォントを指定する

ダウンロードしたフォントを変数に入れる

まず、ダウンロードしたフォントをfunction preloadで読み込んでfont変数に入れます。

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

フォントを指定する

そして、textFont(font)でフォントを指定します。

textFont(font);

コード全体

let font;

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

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  background(220, 100, 100, 100);
  textAlign(CENTER, CENTER);
  textSize(60);
  textFont(font);
  fill(255);
  text("確認用\nsample", width / 2, height / 2);
}

出来上がった画像は以下のようになります。
フォントは、「Zen Old Mincho」を使っています。