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

Typekit の標準の埋め込みコードは、シンプルなペアの <script>タグです。最初のタグは、コンテンツデリバリネットワーク(CDN)からキットの JavaScript を読み込む外部 <script> タグです。2 番目の <script> タグは、キットを使用してフォントの読み込みを実際に開始するインライン JavaScript の一部です。

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

キットのデフォルトの埋め込みコードを確認するには、キットメニューからキット名を選択してキットエディターを開き、右上にある「埋め込みコード」をクリックします。特定のキット用の JavaScript 埋め込みコードが提供されます。この埋め込みコードをサイトに追加すべき場所がキットエディターで示されます。ダイナミックキットでは、パフォーマンスを最適化するために、ページの最後にある </body> 終了タグの前にこのコードを配置する必要がありますが、他のキットではサイトの <head> タグ内に配置します。

JavaScript 埋め込みコードの使用方法に関する説明

標準の埋め込みでは Typekit CSS ファイルをサイトに非同期に読み込むので(async: true)、ファイルの読み込み中にページはブロックされません。非同期読み込みのメリットは、何らかの理由でキットのリクエストの速度が遅い場合でも、残りのページの表示がフォントの読み込み中にブロックされない点です。

CSS をページに非同期に追加すると、フォントの読み込み中にスタイルが適用されていないテキストが表示される現象(FOUT)が発生する場合があります。ほとんどのブラウザーでは、デフォルトで FOUT が適切に隠されます。スクリプトの読み込みと実行が完了すると、フォントイベントを使用してその他の問題を制御できます。

そのページで Typekit のフォントが使用可能になるのを待つ場合は、<script> タグを使用してページの表示をブロックして FOUT の発生を防いだり、{async: true} オプションを削除したり、false に設定したりします。

高度な埋め込みコード

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

<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>

キットの高度な埋め込みコードを確認するには、キットメニューからキット名を選択してキットエディターを開きます。次に、右上にある「高度な埋め込みコード」リンクをクリックして「詳細を表示」をクリックします。

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

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

Typekit JavaScript API

注意:JavaScript フォントイベントは、ダイナミックキットでまだサポートされていません。代わりに、CSS フォントイベントを使用してください。

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

Typekit.load()

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

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

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

  • 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 フォントの提供

Typekit で東アジアのフォントを提供するために、ダイナミックキットを開発しました。この機能により、サイズの大きな東アジアのフォント(ほとんどの場合 10,000 グリフを超える)を、読み込み時間に大きな影響を与えずに Web サイトで読み込むことが可能になります。

キットに東アジアのフォントファミリーを追加すると、自動的にダイナミックキットと呼ばれるものになります。ダイナミックキットでは、キットエディターに「ダイナミックサブセット」という新しい文字セットオプションがあります。これは自動的にオンになっています。

源ノ角ゴシックを含むダイナミックキット

ダイナミックキットは、ニュースフィードやコメントセクションなど、DOM へのすべての変更を検知し、サブセットに追加する必要のある新しい文字を要求します。これはダイナミックオーグメンテーションと呼ばれ、ダイナミックサブセットオプションを使用するキットのフォントファミリーに対して自動的に動作します。

このようにして、新しいフォント全体をダウンロードするのではなく、単純に追加の字形を要求し、ブラウザーでそれをすぐに更新できるようになりました。

ダイナミックキットでは、どのグリフが読み込まれたかを把握するためにページを解析する必要があるので、最適なパフォーマンスを得るために、JavaScript を閉じタグ </body> の直前に配置します。

JavaScript 埋め込みコードの使用方法に関する説明

既存の言語サブセットのキットをダイナミックキットに変換する場合は、Web サイトの埋め込みコードを <head> からページの終わりに移動する必要があるでしょう。

これらの新しい機能の詳しい使い方については、Web サイトへのフォントの追加および言語サポートとサブセットのヘルプ記事を参照してください。

ブラウザーのサポートについて詳しくは、更新されたブラウザーおよび OS のサポートを参照してください。

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

多くの場合、Web ページに複数のキットを追加することは可能ですが、推奨はされません。いくつかの理由により、1 つのページ上で複数のキットを使用するよりも 1 つのキットを使用するほうが大抵の場合効率的です。

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

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

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

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