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

ナカジ(@cp_nakajun)です。

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

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

p5jsでも同じように

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

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

let myFont;

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

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

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

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を使うと上記の画像のようになります。