CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Babylon.jsで、ブラウザ再生環境に依存せずにフォントが使えるようにしよう

これはBabylon.js アドベントカレンダー2022の記事です。

qiita.com

ブラウザで表示されるサイトの文字フォントは、ブラウザが動くコンピュータ機器にインストールされているフォントに依存します。
そのため、あまり使われないフォントでサイトを作っても、相手のブラウザでは意図通りのフォントで表示されないことがあります。

これを回避するために、インターネットで公開されているフォントを読み込む処理をサイトに追加する方法があります。

今回は、Babylon.jsのPlaygroundで任意のフォントで再生する方法を解説します。

1. インターネット上のフォントを読み込むサンプルコード

すでに公開されていました。 https://www.babylonjs-playground.com/#J3X1EJ#2

最初にHTMLページでcssを追加し、その後でフォントを読み込む処理が書かれています。
gist.github.com

2. 日本語のフォントでいろいろ試してみる

商用利用も可能なフォントの提供サービスとして、Googleフォントがあります。

https://fonts.google.com/

Googleフォントには多数の言語向けフォントが公開されており、トップページからAll Language > Japaneseにすると日本語フォントをいろいろと選べます。

Japanese examples of Google font

fonts.google.com

今回はフォントの名称さえわかればよいので、ページをスクロールして好きなフォントの名称を先ほどのPlaygroundにコピペします。いくつか読み込んでみました。

■RocknRoll One 'RocknRoll One' font on Babylon.js Playground

■Zen Kurenaido
'Zen Kurenaido' font on Babylon.js Playground

■Potta One
'Potta One' font on Babylon.js Playground

3. おわりに

この仕組みであれば、好きなフォントを読み込むことができます。ただし、フォントのロードには少し時間がかかるのでブラウザのネットワーク環境が悪いと何も表示されなかったり、基本のsans-serifフォントになったりということがありました。

そのため、Playgroundで日本語フォントを使う場合は、読み込み速度なども考慮して作る必要がありそうです。