- Adobe Fonts ユーザガイド
- はじめに
- フォントのライセンス
- フォントの入手と使用
- Creative Cloud アプリケーションでの Adobe Fonts の使用
- フォントの管理
- デスクトップアプリケーションでの見つからないフォントの解決
- InDesign でのフォントの使用
- フォントとタイポグラフィ
- HTML5 Canvas ドキュメントでの web フォントの使用
- InCopy でのフォントの使用
- Muse での web フォントの使用
- フォントファイルのパッケージング
- トラブルシューティングガイド：フォントの追加
- 追加したフォントがフォントメニューに表示されない
- 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
- 現在使用しているフォントがフォントメーカーによって更新された場合
- Web デザインと開発
- Web サイトへのフォントの追加
- トラブルシューティングガイド：web サイトへのフォントの追加
- フォントの問題のトラブルシューティング
- HTML 電子メールまたはニュースレターでの web フォントの使用
- Accelerated Mobile Pages（AMP）を使用した web フォントの使用
- CSS セレクター
- font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
- 埋め込みコード
- ダイナミックサブセットと web フォント提供
- フォントイベント
- Web フォントが use.typekit.net から読み込まれるのはなぜですか。
- サイトが use.typekit.net に接続できない
- CodePen での web フォントの使用
- ブラウザーと OS のサポート
- ドメイン
- ローカル開発環境での web フォントの使用
- コンテンツセキュリティポリシー
- Web フォントの印刷
- 言語サポートと OpenType 機能
- フォント技術
ダイナミックサブセットで使用される JavaScript のフォントの読み込みには、フォントイベントが含まれています。これにより、フォントがアクティブか、読み込み中か、何らかの理由で使用できないかに基づいて、Web ページをカスタマイズできます。
CSS 埋め込みコードにフォントイベントはまだ含まれていません。 CSS 埋め込みコードと共に別の JavaScript ライブラリを含めることで、フォントの読み込みをカスタマイズできます。
CSS でのフォントイベントの使用
フォントの読み込み中またはフォントがアクティブでない場合のページの表示方法をより詳細に制御するために、JavaScript の埋め込みコードでは、フォントがページに読み込まれると発生する一連のフォントイベントを提供します。
主に 3 つのフォントイベントがあります。次に示すように、各イベントには対応するクラス名（括弧内）があります。
- 読み込み（.wf-loading）：Web フォントの読み込み中
- アクティブ（.wf-active）：Web フォントがアクティブな状態
- 非アクティブ（.wf-inactive）：Web フォントが非アクティブな状態
これらのイベントに関連付けられた CSS クラスが、読み込み中に HTML 要素に追加されます。CSS クラスをスタイルシートで使用すると、フォントの読み込み時にページのスタイルがどのように指定されるかを制御できます。例えば、次のように指定します。
.wf-loading {
/* styles to use when web fonts are loading */
}
.wf-active {
/* styles to use when web fonts are active */
}
.wf-inactive {
/* styles to use when web fonts are inactive */
}
一般に、フォントイベントクラスは、Web フォントをサポートしていないブラウザーや Web フォントが無効なブラウザーで、スタイルが適用されていないテキストが表示される現象（FOUT）を制御したり、フォールバックフォントおよびスタイルを定義したりするために使用されます。ブラウザー、OS およびユーザー設定の組み合わせによってはページ上でフォントがアクティブにならないので、フォールバックフォントおよびスタイルを追加することをお勧めします。
JavaScript フォントイベント
また、これらのフォントイベントは、Typekit.load メソッドを通じて JavaScript コールバックをフックする場合にも使用できます。Typekit.load を呼び出す際に、コールバック関数を含むオブジェクトを渡すことができます。読み込み中に別のフォントイベントが発生すると、このコールバック関数が呼び出されます。例えば、次のように指定します。
<script>
try {
Typekit.load({
loading: function() {
// JavaScript to execute when fonts start loading
},
active: function() {
// JavaScript to execute when fonts become active
},
inactive: function() {
// JavaScript to execute when fonts become inactive
}
})
} catch(e) {}
</script>
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 に変わります。したがって、次のコードをスタイルシートに追加できます。
.wf-loading h1 {
/* styles to use while fonts are loading */
}
.wf-active h1 {
/* styles to use after fonts have loaded */
}
次に、スタイルを調整して FOUT を軽減できます。例えば、一瞬表示されるフォントと読み込まれる Web フォントが同じサイズになるようにします。または、フォントが完全に読み込まれるまでテキストを隠すこともできます。例えば、次のように指定します。
<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>
<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>
「フォールバックフォントのスタイル指定」の節に、その他のフォントイベントを使用した CSS スタイルの設定例があります。
フォントイベントの使用：フォールバックフォントのスタイル指定
フォントは、画像やビデオと同様に、アセットとして Web ページに読み込まれます。オペレーティングシステム、Web ブラウザー、インストールされている拡張機能、ユーザー設定および接続速度の組み合わせによっては、Web フォントを読み込めない場合があります。このような場合は、CSS スタックのフォールバックフォントが代わりに使用されます。
例えば、Web フォントを読み込めなくてもレイアウトが変わらないようにするために、字幅が狭い Web フォントを使用する際にフォールバックフォントのサイズを調整できます。方法は次のとおりです。
.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}
.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px; /* Larger size for condensed font */
}
フォントイベントの使用：ダイナミックプロジェクトの 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 による読み込みをシミュレートできます。
.wf-loading {
/* styles to use when web fonts are loading */
}
.wf-active {
/* styles to use when web fonts are active */
}
.wf-inactive {
/* styles to use when web fonts are inactive */
}
例えば、h1 要素と p 要素で Web フォントが使用されている場合、フォントの読み込み中にこれらの要素を非表示にするには、次の CSS を使用します。
.wf-loading h1, .wf-loading p {
visibility: hidden;
}
.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}
