埋め込みコードには、ブラウザーで web フォントを web サイトに読み込む方法、またはメールクライアントで web フォントを HTML メールに読み込む方法が記述されています。
デフォルトおよび @import 埋め込みコードでは、フォントの読み込みに CSS のみを使用します（JavaScript を使用しません）。これらを使用すると、フォントを web ページ、HTML メールまたはニュースレター、Google AMP および web フォントをサポートするその他のタイプの多くのプロジェクトに追加できます。 JavaScript によるフォントの読み込みは、東アジアの web フォントの提供に必要な、ダイナミックサブセットに使用されます。
各プロジェクト用の埋め込みコードは web プロジェクトページで確認できます。
デフォルトの埋め込みコード
デフォルトの埋め込みコードは、ブラウザーで Web プロジェクト CSS をフォントネットワーク（use.typekit.net）から読み込む単一の <link> タグです。
プロジェクト用のデフォルトの埋め込みコードは、web プロジェクトページで確認できます。 この埋め込みコードを web サイトの <head> タグに追加します。
@import 埋め込みコードは、CSS スタイルシート内で直接使用できます。 プロジェクト用の @import 埋め込みコードを確認するには、web プロジェクトページを表示し、「@import リンク」オプションをクリックします。
Web サイトの <head> 内の style タグの間に追加します。
または、CSS ファイルの上部に配置します。
@import 埋め込みコードを使用する場合、他のすべての @import ステートメントと共に <style> タグまたは CSS ファイルの先頭に記述する必要があります。そうしなかった場合、フォントは読み込まれません。 @import 行の前にリストできるのは、@charset エントリのみです。
CSS を使用すると、web フォント CSS の読み込みが終了するまでページの残りの部分が表示されない場合があります。 動作はブラウザによって異なり、各ブラウザが外部CSSファイルをどのように処理するかに依存します。
ページの他の部分をブロックしない非同期フォント読み込みには、CSS埋め込みコードと併せて別のJavaScriptライブラリを含めてフォント読み込みをカスタマイズしてください。
JavaScript 埋め込みコード
JavaScript 埋め込みコードは、東アジアの Web フォントの提供のために使用される、ダイナミックサブセットに必要です。
ダイナミックプロジェクトの JavaScript 埋め込みコードは、web プロジェクトページに表示されます。
高度な埋め込みコードは、設定オブジェクトを Typekit.load メソッドに渡すことで、カスタマイズできます。詳しくは、JavaScript API の節を参照してください。
JavaScript API
JavaScript はグローバル変数 Typekit と、パブリックメソッド load を公開しています。 引数なしで Typekit.load を呼び出すと、フォントの読み込みがトリガーされます。
また、設定オブジェクトを Typekit.load に渡すこともできます。
以下のコールバックを指定できます。
- loading - このコールバックは、すべてのフォントがリクエストされたときにトリガーされます。
- active - このコールバックは、フォントがレンダリングされたときにトリガーされます。
- inactive - このコールバックは、リンクされたフォントをブラウザーがサポートしていないとき、または読み込めるフォントがなかった場合にトリガーされます。
- fontloading - このコールバックは、読み込まれたフォントごとに 1 回ずつトリガーされます。 このコールバックは、第 1 引数にファミリー名を、第 2 引数にフォントバリエーションを指定して呼び出します。
- fontactive - このコールバックは、レンダリングされたフォントごとに 1 回ずつトリガーされます。 このコールバックは、第 1 引数にファミリー名を、第 2 引数にフォントバリエーション記述を指定して呼び出します。
- fontinactive - このコールバックは、フォントを読み込めない場合にトリガーされます。 このコールバックは、第 1 引数にファミリー名を、第 2 引数にフォントバリエーション記述を指定して呼び出します。
Web サイトの埋め込みコードの変更
既に従来の JavaScript 埋め込みコードによってフォントを使用している web サイトがある場合、コードの <script> タグを HTML <link> 埋め込みコードまたは CSS @import 埋め込みコードに置き換えることで、新しいバージョンの CSS に切り替えることができます。
Web サイトでの従来の埋め込みコードの使用
アドビでは、フォントの提供をさらに良くしていくために、埋め込みコードオプションを変更する場合がありますが、以前のバージョンもすべて継続して動作します。
Web サイトで古い埋め込みコードを使用していても、それを変更する必要はありません。 ただし、新しいバージョンにアップグレードすることによって、多くの web サイトでパフォーマンスの改善が期待できます。
埋め込みコードの以前のバージョンには、CSS ファイルを非同期的に読み込む JavaScript バージョンが含まれています。
さらに、プロトコルを省略した JavaScript バージョンも含まれています。
（サイトでプロトコルを省略した埋め込みコードを使用している場合でも、フォントの提供においてはすべてのリクエストについて HTTPS が使用されます）。
Web サイトでの複数の埋め込みコードの使用
同じ web ページに複数の埋め込みコードを追加することは推奨されません。それには、次のような理由があります。
- 埋め込みコードの各コピーはほとんど重複しています。
- プロジェクトごとに個別のフォントが要求されることにより、HTTP リクエストが増加して読み込みがさらに遅くなります。
- 最初の読み込み後に、サイト上のすべてのページに対して 1 つのプロジェクトをキャッシュできます。
