ダイナミックサブセットで使用される JavaScript のフォントの読み込みには、フォントイベントが含まれています。 これにより、フォントがアクティブか、読み込み中か、何らかの理由で使用できないかに基づいて、web ページをカスタマイズできます。
CSS 埋め込みコードにフォントイベントはまだ含まれていません。 CSS 埋め込みコードと共に別の JavaScript ライブラリを含めることで、フォントの読み込みをカスタマイズできます。
CSS でのフォントイベントの使用
フォントの読み込み中またはフォントがアクティブでない場合のページの表示方法をより詳細に制御するために、JavaScript の埋め込みコードでは、フォントがページに読み込まれると発生する一連のフォントイベントを提供します。
主に 3 つのフォントイベントがあります。次に示すように、各イベントには対応するクラス名（括弧内）があります。
- 読み込み（.wf-loading）：web フォントの読み込み中
- アクティブ（.wf-active）：web フォントがアクティブな状態
- 非アクティブ（.wf-inactive）：web フォントが非アクティブな状態
これらのイベントに関連付けられた CSS クラスが、読み込み中に HTML 要素に追加されます。 CSS クラスをスタイルシートで使用すると、フォントの読み込み時にページのスタイルがどのように指定されるかを制御できます。 例えば、次のように指定します。
一般に、フォントイベントクラスは、Web フォントをサポートしていないブラウザーや Web フォントが無効なブラウザーで、スタイルが適用されていないテキストが表示される現象（FOUT）を制御したり、フォールバックフォントおよびスタイルを定義したりするために使用されます。 ブラウザー、OS およびユーザー設定の組み合わせによってはページ上でフォントがアクティブにならないので、フォールバックフォントおよびスタイルを追加することをお勧めします。
JavaScript フォントイベント
また、これらのフォントイベントは、Typekit.load メソッドを通じて JavaScript コールバックをフックする場合にも使用できます。 Typekit.load を呼び出す際に、コールバック関数を含むオブジェクトを渡すことができます。読み込み中に別のフォントイベントが発生すると、このコールバック関数が呼び出されます。 例えば、次のように指定します。
JavaScript コールバックを使用すると、フォントが読み込まれたときにフェードインのようなものを追加したり、表示されたテキストのサイズに基づいて、複雑な演算をして、レイアウトを変更することもできるでしょう。
このような基本的なフォントイベントに加えて、個々のフォントバリエーションに対応した、さらに詳細なフォントイベントも用意されています。 このようなイベントのクラス名は、フォントファミリー名、フォントバリエーション記述およびフォントイベント名を組み合わせたものです。 例えば、標準の太さ 400 の フォントをプロジェクトに追加すると、wf-gesta-n4-loading および wf-gesta-n4-active のようなフォントイベントクラスが生成されます。 JavaScript 側には、fontloading、fontactive および fontinactive の各コールバックがあり、各バリエーションのフォントファミリーとフォント記述を渡すことができます。
フォントイベントの使用：FOUT（Flash of Unstyled Text）の管理
Web フォントの読み込み処理は、ブラウザーによって異なります。 まずフォールバックフォントを使用してテキストを表示し、読み込みが終わってからリンクされたフォントに切り替わるブラウザーの場合、スタイルが適用されていないテキストが表示される現象（FOUT）が発生します。
フォントの読み込み中は、.wf-loading のクラスが HTML 要素に適用されます。 フォントが読み込まれると、そのクラスは.wf-active.に変更されます。そのため、スタイルシートに以下を追加することができます：
次に、スタイルを調整して FOUT を軽減できます。例えば、一瞬表示されるフォントと読み込まれる web フォントが同じサイズになるようにします。 または、フォントが完全に読み込まれるまでテキストを隠すこともできます。 例えば、次のように指定します。
「フォールバックフォントのスタイル指定」の節に、その他のフォントイベントを使用した CSS スタイルの設定例があります。
フォントイベントの使用：フォールバックフォントのスタイル指定
フォントは、画像やビデオと同様に、アセットとして web ページに読み込まれます。 オペレーティングシステム、web ブラウザー、インストールされている拡張機能、ユーザー設定および接続速度の組み合わせによっては、web フォントを読み込めない場合があります。 このような場合は、CSS スタックのフォールバックフォントが代わりに使用されます。
例えば、web フォントを読み込めなくてもレイアウトが変わらないようにするために、字幅が狭い web フォントを使用する際にフォールバックフォントのサイズを調整できます。 方法は次のとおりです。
フォントイベントの使用：ダイナミックプロジェクトの FOIT（Flash Of Invisible Text）のシミュレーション
デフォルトでは、ダイナミックプロジェクトは、web フォントのスタイルが適用されたテキストをレンダリングする際に、FOUT（Flash Of Unstyled Text）を使用します。 これは、web フォントが読み込まれている間、ブラウザーはフォールバックフォントでテキストを表示し、使用可能になると同時に web フォントに切り替える方法です。 もう一つの方法として、web フォントのダウンロード中はブラウザーでテキストを表示せず、web フォントの読み込み完了後に、指定の web フォントでテキストを表示する方法があります。 これを FOIT（Flash Of Invisible Text）と呼びます。
FOUT 方式では、特にネットワーク接続が低速の場合などに、より迅速にページを表示できますが、FOIT 方式の方が好ましい場合には、フォントイベントを使用してあらゆるブラウザー上で FOIT をシミュレートすることができます。 フォントイベントは、要素に追加される次の 3 つのクラスです。
- .wf-loading:フォントの読み込み中に追加されます。
- .wf-active：少なくとも 1 つのフォントが読み込まれたときに追加されます。
- .wf-inactive：どのフォントも読み込まれていないときに追加されます。
これらの 3 クラスを CSS の中で使用し、wf-loading クラスがアクティブなときにテキストを隠し、wf-active または wf-inactive クラスがアクティブなときにテキストを表示することで、FOIT による読み込みをシミュレートできます。
例えば、h1 要素と p 要素で Web フォントが使用されている場合、フォントの読み込み中にこれらの要素を非表示にするには、次の CSS を使用します。
