Typekit JavaScript フォントの読み込みには、フォントイベントが含まれます。これにより、フォントがアクティブか、読み込み中か、何らかの理由で使用できないかに基づいて、Web ページをカスタマイズできます。フォントイベントは、CSS フォントの読み込みでは使用できません。埋め込みコードのヘルプページでは、CSS フォントの読み込みから JavaScript に切り替えてフォントイベントを活用する方法について説明しています。

CSS フォントイベント

フォントの読み込み中またはフォントがアクティブでない場合のページの表示方法をより詳細に制御するために、Typekit の埋め込みコードでは、フォントがページに読み込まれると発生する一連のフォントイベントを提供します。

主に 3 つのフォントイベントがあります。次に示すように、各イベントには対応するクラス名(括弧内)があります。

  1. 読み込み(.wf-loading):Web フォントの読み込み中
  2. アクティブ(.wf-active):Web フォントがアクティブな状態
  3. 非アクティブ(.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 src="https://use.typekit.net/xxxxxxx.js"></script>
<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 コールバックは、CSS と比較するとあまり一般的ではありません。コールバックを使用すると、多くの場合、フォントが読み込まれたときにフェードインのようなものが追加されるか、または表示されるテキストの寸法に基づいて外観のレイアウトの複雑な演算によるサイズ変更が行われます。

このような基本的なフォントイベントに加えて、個々のフォントバリエーションに対応した、さらに詳細なフォントイベントも用意されています。このようなイベントのクラス名は、フォントファミリー名、フォントバリエーション記述およびフォントイベント名を組み合わせたものです。例えば、標準の太さ 400 の フォントをキットに追加すると、-wf-gesta-n4-loading および wf-gesta-n4-active のようなフォントイベントクラスが生成されます。JavaScript 側では、fontloading、fontactive および fontinactive の各コールバックを使用して、各バリエーションのフォントファミリーとフォント記述を渡すことができます。

フォントイベントの使用:FOUT(Flash of Unstyled Text)の管理

フォントは、画像やビデオと同様に、アセットとして Web ページに読み込まれます。使用するブラウザーや接続の速度に応じて、フォントがすぐに読み込まれることも、残りのページの読み込みよりも時間がかかることもあります。フォント読み込みの処理方法はブラウザーごとに異なります。例えば、Safari と Chrome では、Web フォントで設定されているテキストの表示が、フォントが読み込まれるまで実行されません。また、Internet Explorer では、フォントが読み込まれるまでページに何も表示されません。Firefox では、フォントスタックのフォールバックフォントを使用してサイトが表示され、読み込みが完了すると、リンクされたフォントに切り替わります。これにより、スタイルが適用されていないテキストが表示される現象(FOUT)が発生します。

Typekit では、フォントの読み込み中にページのスタイルがどのように指定されるかをフォントイベントを使用して制御できるので、結果的に FOUT の制御も可能になります。フォントの読み込み中は、.wf-loading のクラスが HTML 要素に適用されます。フォントの読み込みが完了すると、このクラスが .wf-active に変わります。したがって、次のコードをスタイルシートに追加できます。

.wf-loading h1 {
/* styles to use while Typekit is loading */
}

.wf-active h1 {
/* styles to use after Typekit is loaded */
}

次に、スタイルを調整して FOUT を軽減できます。例えば、一瞬表示されるフォントと読み込まれる Typekit フォントが同じサイズになるようにします。または、フォントが完全に読み込まれるまでテキストを隠すこともできます。例えば、次のように指定します。

<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 フォントを表示できない場合があります(例えば、ユーザーが古いバージョンのブラウザーを使用している場合や、セキュリティ設定でリファラーの送信が禁止されている場合など)。Typekit の Web フォントは大部分のユーザーが利用できます(Web の 97 %以上)が、利用できないフォントも一部存在します。このような場合は、CSS スタックのフォールバックフォントが代わりに使用されます。

例えば、Web フォントを読み込めなくてもレイアウトが変わらないようにするために、横幅圧縮版の Web フォントを使用する際にフォールバックフォントのサイズを調整できます。方法は次のとおりです。

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for our non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when Typekit web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for our condensed font */
}

フォントイベントの使用:ダイナミックキットの FOIT(Flash Of Invisible Text)のシミュレーション

デフォルトでは、ダイナミックキットは Typekit フォントのスタイルが適用されたテキストをレンダリングするとき、FOUT(Flash Of Unstyled Text)を使用します。これは、Typekit フォントが読み込まれている間、ブラウザーはフォールバックフォントでテキストを表示し、読み込み完了と同時に Typekit フォントに切り替える方法です。もう一つの方法として、Web フォントのダウンロード中はブラウザーでテキストを表示せず、Web フォントの読み込み完了後に、指定の Web フォントでテキストを表示する方法があります。これを FOIT(Flash Of Invisible Text)と呼びます。

FOUT 方式では、特にネットワーク接続が低速の場合などに、より迅速に使用可能なページを表示できますが、FOIT 方式の方が好ましい場合には、Typekit のフォントイベントを使用してあらゆるブラウザー上で FOIT をシミュレートすることができます。フォントイベントは、

要素に追加される 3 つのクラスを意味します。

  1. .wf-loading:Typekit がフォントを読み込んでいるときに追加されます。
  2. .wf-active:少なくとも 1 つのフォントが読み込まれたときに追加されます。
  3. .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 */
}

この場合、実際に隠す必要があるのは Web フォントを使用している要素のコンテンツだけです。例えば、h1 と p の要素が Web フォントを使用している場合には、次のように指定します。

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー