フォントはCSSから静的に読み込むのが普通

でも動的に読み込みたい場面もあります。

• フォントを自由に追加したかったり、
• フォントの重要度が低かったり、
• ページ読込に負荷をかけないためとか、

そういう時はJavaScriptから動的追加も可能。

ただ意外とその方法が複雑で忘れがち。
そこでJSからフォント読み込みする手順まとめます。

フォント読み込みにはFontFaceを使えばいい

JavaScriptでは標準で FontFace が利用可能

これは次の役割を担ってるものです。

• フォントファイル(.tff, etc)の読込
• フォントファミリー名の定義
• フォントフェースへのスタイル適用

別にライブラリとか探さなくてもOK。

これだけで動的にフォントを扱うには十分ですね。

例えば Cosmos Logic というフォントがあります。

▼ このFontFaceオブジェクトを作るコード例

上コードの１つめの引数がフォントファミリー名です。CSSプロパティの font-family: ~  で指定するフォントの名前のこと。ここには空白を含めてもいいし、任意の名前でOKです。

そして２つ目引数の 'url(./Cosmos_Logic.ttf)'  から Cosmos_logic.ttf というファイルを読み込んでます。このコードだと同じディレクトリにあるファイルを読み込み、これはローカルにあろうが全く問題なしです。

あと３番目の引数にはフォントの太さとかを指定。上コードだと太さ700で標準的なスタイルを指定してます。この引数については正直良く分かってません。

まあこういう感じでFontFaceは作成可能。

もちろん これだけではフォント適用できないです。

FontFaceによる動的フォント読み込みのコード例

では具体的なフォント読み込みのコード例を１つ

読み込みのコードはそんなに難しくありません。

実際に次のような手順で上手くいきました。

１．テキスト要素を作成

▼ なんでもいいけどHTML例

まあ何でもOKですけどね・・・

ここではアルファベットと数字の羅列だけ

２．フォントを動的読み込みするコード追加

こういうコードを追加してみました。

説明すると fontFace.load()  のあとにコールバックを渡しておき、読み込み後に ドキュメント全体にフォントを追加、そのあとbody要素のにフォントファミリー指定するといった感じ

実際の表示はこうなりました。

ちゃんとフォントが反映されてます。

動的フォント切り替えはそんな難しくありません。

動的フォント読み込みのまとめ

簡単にまとめると次の通り

• フォントはFontFaceで操作できる
  JavaScriptではフォント（*.ttf, *.otf、*.ttc、*.eot）を扱うのに専用オブジェクトが用意されている。これを使えばローカルでもどこからでもフォント読み込みが可能
• 読み込み後にdocumentに追加する
  例えば document.fonts.add(loadedFace);  のようにすればドキュメントに追加可能。実際に適用するには document.body.style.fontFamily = '"Cosmos Logic"';  などとすればＯＫ（もちろんjQueryでも可）

僕自身はFontFaceを今回初めて知りました。

こういった便利なものは活用していきたいですね。

以上、JSで動的フォント読み込みでした。ではまた。