Web Font LoaderではGoogle FontsやTypekit、Fonts.comなど組み込みのモジュールで簡単にウェブフォントをロードすることが出来ますが、それら組み込みモジュール以外にも自サイトでホストしているウェブフォントや、第三者がパブリックに公開・ホストしているウェブフォントを自由にロードすることが出来ます。

FontAwesomeとNoto Sans Japaneseを読み込むデモ

組み込みモジュール以外のウェブフォントを読み込むには設定オブジェクトのcustomプロパティにフォント名、FVD、@font-faceが記述されているcssのurlをセットします。次のデモでは、このカスタムモジュールを利用して人気のアイコンフォントであるFontAwesomeとGoogleが提供しているアーリーアクセスウェブフォントのNoto Sans Japaneseを読み込んでいます。

このデモではNoto Sans Japaneseのurlを指定していません。その代わりheadに極普通にcss(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css)を読み込んでいます。実のところurlsプロパティは<head>に動的にこれらのurlをhrefにもつ<link rel=”stylesheet”>を挿入するだけなので問題ありません。ですからページのcssに既に@font-faceが定義されている場合は、わざわざ別のcssに分離させたりする必要もありません。

testStringsに注意

上記のデモではtestStringsプロパティに特定の文字列を指定しています。このtestStringsプロパティはフォントがロードされたか確認するための文字列で、そのウェブフォントが対応する文字でなければなりません。アイコンフォントなどはユニコードのPrivate Use Areaを利用しているので、testStringにはそのアイコンフォントの適当なアイコンをユニコードで指定しましょう。また、日本語ウェブフォントなどは適当な日本語をtestStringsに指定しましょう。このプロパティをセットしない場合、そのウェブフォントのtestStringsは”BESbswy”が代わりに使用されます。ですから、もしウェブフォントが”BESbswy”の一文字も対応していない場合、ロード失敗と判断されてしまうので注意してください。