【p5js】loadFont()が効いてない!?という時でも Fontファイルを読み込んで使う2つの方法

投稿日:2019-12-29



ナカジ(@cp_nakajun)です。

文字を表示するときのフォントは色んなものを使いたい
そもそもこれにニーズがあるのか不安ですが…

何か試したいときに「よく使うモチーフ」を持ってないので、とりあえず「Crative Plus」と「Hello world」のように表示してます。

p5jsでも同じように

と思って公式Referenceのようにやり始めたところ

うまくいかなくて、ですね。

let myFont;

function preload() {
myFont = loadFont(‘assets/inconsolata.otf’);
}

preload()なのかloadFont()が機能している気がしなくて、悩んでいたのですが

別の方法で解決できたのでその2つの方法を残しておきます。

p5jsで外部フォントを使う方法

結論から書くと、簡単で

  1. Google Fontならhtmlのヘッダーにリンクを貼り付ける
  2. CSSから読み込む

とすると、あとはdraw()関数の中で簡単にtextFont(“フォント名”)とすることで使えます。

htmlのヘッダーにリンクを貼る



上記画像のように使いたいフォントへリンクすれば良い

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

CSSから読み込む



CSSから読み込む場合は「@font-face」記述です。

@font-face {
	font-family: 'Diplomata';
	src: url(./fonts/Diplomata-Regular.ttf);
}

@font-face {
	font-family: 'Fredericka the Great';
	src: url(./fonts/FrederickatheGreat-Regular.ttf);
}

sketch.js サンプル



上記の画像を表示したコードサンプルは以下になります。

function draw() {
    background(10);
    let tex_size = 80 ;
  
    //Load from Google Fonts
    fill('#D02158');
    textSize(tex_size);
    textFont("Righteous");
    text('Creative plus', 50, 100);
  
    fill('#FD6041');
    textSize(tex_size - 20);
    textFont("Monoton");
    text('Creative  plus', 100, 200);
  
    //Load from CSS
    fill('#FEAA3A');
    textSize(tex_size);
    textFont("Fredericka the Great");
    text('Creative plus', 150, 300);
  
    fill('#2DA4A8');
    textSize(tex_size - 20);
    textFont("Diplomata");
    text('Creative plus', 200, 400);
}

先に記載したhtmlとCSSを使うと上記の画像のようになります。

サポート募集中

この記事はお役に立てましたか。
よかったら、コーヒー ☕ をご馳走いただけたら励みになります。



おすすめのクリエイティブ・コーディング関連カテゴリー

ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します