Typekit（Adobe Fonts）を早く読み込む方法｜パフォーマンス改善の実践ガイド

Webサイトの表示速度を改善するうえで「フォント読み込みの最適化」は欠かせません。
特に Typekit（Adobe Fonts） を使う場合、デフォルトの設定のままだと、
フォントが一瞬表示されない、最初は別のフォントで表示される事態が発生しやすくなります。

この記事では、実際に使える Typekit（Adobe Fonts）の高速化テクニック を紹介します。
フロントエンドのパフォーマンス改善やSEO対策の一環としてご活用ください。

1. headにプリフェッチ & プリコネクトを追加する

プリフェッチ（dns-prefetch）、プリコネクト（preconnect）は、早く読み込ませるための機能です。
プリフェッチは「住所を先に調べる」、プリコネクトは「先に出発しておく」と覚えるとわかりやすいです。

まず、headタグ内に以下のコードを追加します。
Typekitのドメインへ事前に接続し、DNS解決やTLSハンドシェイクを短縮することで読み込みが高速化されます。

<!-- DNS Prefetch for Typekit -->
<link rel="dns-prefetch" href="//use.typekit.net">
<link rel="preconnect" href="https://use.typekit.net" crossorigin>

<!-- この後に、Typekit（Adobe Fonts）のscriptコードを入れる -->

dns-prefetch と preconnect を併用するのがポイントです。
これにより、Adobe FontsのJavaScriptが実行される前にネットワーク接続が準備され、表示速度が改善されます。

2. SCSSで@font-faceを上書きし、font-displayを制御する

Adobe Fontsはデフォルトでは font-display: auto になっており、ユーザー環境によってはフォントが意図せずシステムフォントに置き換わるケースがあります。
これを font-display: swap に変更することで、
まずシステムフォントを表示 → ダウンロード完了後にTypekitフォントへ切り替え という挙動になります。

以下をSCSSに追加してください。

// Typekitフォントの@font-face定義
@font-face {
  font-family: "tk-takumi-okiraku-markertai";
  font-display: swap; // autoからswapに変更を推奨
  /* Typekitの場合、src指定は不要 */
}

@font-face {
  font-family: "tk-takumi-okiraku-markertaip";
  font-display: swap; // autoからswapに変更を推奨
  /* Typekitの場合、src指定は不要 */
}

/* Typekitフォントを%placeholderにセットする */
%en-font {
  font-family: "tk-takumi-okiraku-markertai", sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased; // Safariで太字を滑らかにする
}

%en-font-sub {
  font-family: "tk-takumi-okiraku-markertaip", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

font-display: swap; を必ず指定
Safariでフォントの太さを自然に見せるために -webkit-font-smoothing: antialiased; を追加
%placeholder を使うことで共通フォントスタイルを管理しやすくする

3. 適用例（mixinやextendで利用）

h1 {
  @extend %en-font;
  font-size: 2.4rem;
}

h2 {
  @extend %en-font-sub;
  font-size: 1.8rem;
}

まとめ

• headタグに dns-prefetch + preconnect を追加してネットワーク接続を最適化
• @font-face で font-display: swap を指定
• Safari向けに -webkit-font-smoothing を設定

これらを実装することで、Adobe Fonts（Typekit）の読み込みが速くなり、SEOやユーザー体験の改善につながります。