以下の記事で扱った内容とキーワード的には少し共通点がある、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 に、ブラウザでアクセスしてみると、以下のような内容が読み込まれていることが分かります。
参照した情報
今回の記事に書いた内容に関して、参照した記事を掲載します。