これはBabylon.js アドベントカレンダー2022の記事です。
ブラウザで表示されるサイトの文字フォントは、ブラウザが動くコンピュータ機器にインストールされているフォントに依存します。
そのため、あまり使われないフォントでサイトを作っても、相手のブラウザでは意図通りのフォントで表示されないことがあります。
これを回避するために、インターネットで公開されているフォントを読み込む処理をサイトに追加する方法があります。
今回は、Babylon.jsのPlaygroundで任意のフォントで再生する方法を解説します。
1. インターネット上のフォントを読み込むサンプルコード
すでに公開されていました。 https://www.babylonjs-playground.com/#J3X1EJ#2
最初にHTMLページでcssを追加し、その後でフォントを読み込む処理が書かれています。
gist.github.com
2. 日本語のフォントでいろいろ試してみる
商用利用も可能なフォントの提供サービスとして、Googleフォントがあります。
Googleフォントには多数の言語向けフォントが公開されており、トップページからAll Language > Japaneseにすると日本語フォントをいろいろと選べます。
今回はフォントの名称さえわかればよいので、ページをスクロールして好きなフォントの名称を先ほどのPlaygroundにコピペします。いくつか読み込んでみました。
■RocknRoll One
■Zen Kurenaido
■Potta One
3. おわりに
この仕組みであれば、好きなフォントを読み込むことができます。ただし、フォントのロードには少し時間がかかるのでブラウザのネットワーク環境が悪いと何も表示されなかったり、基本のsans-serifフォントになったりということがありました。
そのため、Playgroundで日本語フォントを使う場合は、読み込み速度なども考慮して作る必要がありそうです。
