埋め込みコードには、ブラウザーで Typekit からのフォントが Web サイトに読み込まれる方法が記述されています。埋め込みコードには、デフォルト CSS、@import CSS、高度な JavaScript など、いくつかの種類があります。

デフォルトおよび @import 埋め込みコードは、(JavaScript ではなく)フォント読み込み用の CSS のみを使用します。これは、Web ページだけでなく、HTML 電子メールやニュースレターGoogle AMP などにも使用できることを意味します。高度な埋め込みコードでは、フォントを非同期で読み込んだり、カスタムコールバックを可能にしたり、スタイルが適用されていないコンテンツの表示方法を管理するためのネイティブフォントイベントを提供したりするために、JavaScript が使用されます。

また、JavaScript フォントの読み込みは、東アジアの Web フォントの提供に使用される、ダイナミックキットにも必要です。

特定のキットの埋め込みコードは、キットエディターを起動して、右上にある「埋め込みコード」リンクをクリックすることで、見つけることができます。

デフォルトおよび @import 埋め込みコード:CSS のみのフォントの読み込み

Typekit のデフォルトの埋め込みコードは、Typekit フォントネットワーク(use.Typekit.net)からキット CSS を読み込む単一の <link> タグです。

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

キットのデフォルトの埋め込みコードを見つけるには、キットエディターを開き、右上にある「埋め込みコード」リンクをクリックします。

デフォルト CSS 埋め込みコード

また、Typekit では、スタイルシートで直接使用できる、@import 埋め込みコードを提供しています。CSS の style タグの間に追加します。

<style>
  @import url("https://use.typekit.net/xxxxxxx.css");
</style>
import-en

キットの @import 埋め込みコードを見つけるには、キットエディターを開き、右上にある「埋め込みコード」リンクをクリックして、「@import」タブを選択します。

高度な埋め込みコード:JavaScript フォントの読み込み

ほとんどのユーザーに対して、デフォルトの埋め込みコードがサイトで問題なく機能します。ただし、キットの読み込みに関する問題が原因で残りのページの読み込みが妨げられる可用性を排除する必要がある場合は、代わりに高度な埋め込みコードの使用を検討してください。高度な埋め込みコードは、最適なパフォーマンスで Typekit からのすべてのファイルを非同期でサイトに読み込むために JavaScript を使用します。

また、高度な埋め込みコードは、東アジアの Web フォントの提供に使用される、ダイナミックキットにも必要です。

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

キットの高度な埋め込みコードを見つけるには、キットエディターを開き、右上にある「埋め込みコード」リンクをクリックして、「詳細」タブを選択します(ダイナミックキットは、高度な JavaScript オプションのみを表示します)。

キットエディターでの高度な埋め込みコードの場所

デフォルトでは、高度な埋め込みコードは、"wf-inactive" クラス名をページに追加する前に、キットの JavaScript の読み込みを 3,000 ミリ秒(3 秒)間試行します。このタイムアウトを設定するには、config ブロックで "scriptTimeout" プロパティの値を変更します。

高度な埋め込みコードは、設定オブジェクトを Typekit.load メソッドに渡すことで、さらにカスタマイズできます。詳しくは、Typekit JavaScript API の節を参照してください。

Typekit JavaScript API

Typekit JavaScript キットはグローバル変数の Typekit と、load という 1 つのパブリックメソッドを公開します。引数なしで Typekit.load を呼び出すと、フォントの読み込みがトリガーされます。

Typekit.load()

また、設定オブジェクトを Typekit.load に渡すこともできます。

Typekit.load({
      // configuration…
 });

この設定オブジェクトには、2 種類のプロパティ(フォントイベントのコールバックと設定オプション)が含まれます。 

注意:

JavaScript フォントイベントは、ダイナミックキットには使用できません。代わりに、CSS フォントイベントを使用します。

以下のコールバックを指定できます。

  • loading - このコールバックは、すべてのフォントがリクエストされたときにトリガーされます。
  • active - このコールバックは、フォントがレンダリングされたときにトリガーされます。
  • inactive - このコールバックは、リンクされたフォントをブラウザーがサポートしていないとき、または読み込めるフォントがなかった場合にトリガーされます。
  • fontloading - このコールバックは、読み込まれたフォントごとに 1 回ずつトリガーされます。このコールバックは、第 1 引数にファミリー名を、第 2 引数にフォントバリエーション記述を指定して呼び出します。
  • fontactive - このコールバックは、レンダリングされたフォントごとに 1 回ずつトリガーされます。このコールバックは、第 1 引数にファミリー名を、第 2 引数にフォントバリエーション記述を指定して呼び出します。
  • fontinactive - このコールバックは、フォントを読み込めない場合にトリガーされます。このコールバックは、第 1 引数にファミリー名を、第 2 引数にフォントバリエーション記述を指定して呼び出します。

以下のオプションがサポートされます。

  • async:CSS の非同期読み込みを有効にします。デフォルトは true です。
  • classes:このオプションが false に設定されている場合、HTML 要素に設定されたフォントイベントクラスを無効にしますデフォルトは true です。
  • events:このオプションが false に設定されている場合、フォントイベントのコールバックを無効にします。デフォルトは true です。
  • timeout:フォント読み込みがタイムアウトとなる時間のミリ秒数です。デフォルトは 3000(3 秒)です。

events と classes の両方が false に設定されている場合、Typekit JavaScript はフォントへの CSS リンクの挿入のみを行い、フォントの監視は実行しません。

 

Web サイトの埋め込みコードの変更

既に JavaScript 埋め込みコードで Typekit を使用している Web サイトがある場合、コードの Typekit <script> タグを HTML <link> 埋め込みコードまたは CSS @import 埋め込みコードに置き換えることで、CSS キットに切り替えることができます。

同様に、JavaScript オプションを活用するために、Web サイトの CSS 埋め込みコードを高度な埋め込みコードに置き換えることができます。

キットは再公開する必要はありません。常に、すべての種類の埋め込みコードを使用できます。

サイトでの複数キットの使用

複数のキットの埋め込みコードを同じ Web ページに追加することは、お勧めしません。いくつかの理由により、大抵の場合は、複数のキットを使用するよりも 1 つのキットを使用するほうが効率的です。

  • 1 つのページで読み込まれるキットごとに埋め込みコードのコピーの読み込みが必要ですが、これは余分です。
  • キットごとに個別のフォントが要求されることにより、HTTP リクエストが増加して読み込みがさらに遅くなります。
  • 最初の読み込み後に、サイト上のすべてのページに対して 1 つのキットをキャッシュできます。

同じ Web ページに、ダイナミックサブセットのキットと言語サブセットのキットの両方を読み込むことはできません。ダイナミックサブセットのキットが優先され、他のキットのフォントはそのサイトで使用できません。ダイナミックサブセットと言語サブセットのフォントの組み合わせをサイトに含めたい場合、それらのフォントは同じキットから読み込まれる必要があります。

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

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