JavaScript

Adobe Fontsの読み込み遅延を改善する方法と自前ホスティング手順【Webエンジニア向け】

 

Adobe FontsをWebサイトに導入した際の読み込み遅延や一瞬のフォント切り替え（FOIT・FOUT）を改善する実践的な対処法と、Webフォントを自前でホスティングする方法を解説。

Adobe Fonts（旧Typekit）は美しい書体を簡単にWebフォントとして導入できる便利なサービスですが、「読み込みが遅い」「表示されるまで一瞬ラグがある」といった問題を感じたことはありませんか？
この記事では、表示遅延の原因とその対処法に加えて、Webフォントを自前ホスティングして遅延を最小化する方法まで詳しく解説します。

Contents

よくある症状：読み込みラグ・切り替えのチラつき

  • 最初はシステムフォントで表示され、数秒後にAdobe Fontsへ切り替わる
  • 一瞬だけ文字が消える（FOIT）
  • 全体がガタつくように表示が変わる（FOUT）

原因と対処法一覧

原因 対策
フォントの非同期読み込み font-display: swap; を設定
外部CDNの接続遅延 <link rel="preconnect"> を使用
不必要なフォントウェイトやスタイルの読み込み 必要なスタイルだけを選んでWebプロジェクトを作成
JavaScript読み込みの遅延 <script> タグの順序最適化

対処法1：font-displayの設定

Adobe FontsのWebプロジェクト設定画面から「font-display: swap」を有効にすると、代替フォントが先に表示され、あとからフォントがスムーズに切り替わります。

対処法2：preconnectでCDN接続を高速化

以下のコードを <head> 内に追加することで、フォントCDNへの接続を事前に開始できます。

<link rel="preconnect" href="https://use.typekit.net" crossorigin>

対処法3：読み込むフォントの種類を絞る

ウェイト（例：300、400、700）やスタイル（イタリック等）は最小限にし、ファイルサイズを抑えましょう。Adobe FontsのWebプロジェクト設定画面で調整可能です。

対処法4：JavaScript読み込みの順序を見直す

読み込みコードをできるだけ <head> の上部に置き、async の使用を避けましょう。 

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

対処法5：Webフォントをサブセット化して自前でホスティング

読み込み速度を抜本的に改善したい場合は、Adobe Fontsを使わず、フォントファイルを自前でホスティングする方法が有効です。必要な文字だけを含めたフォントファイル（サブセット）にすることで、読み込みが爆速になります。

手順：

  1. ライセンスに注意： 使用予定のフォントが商用利用OKか確認。Adobe Fontsのフォントを自前ホスティングするのはライセンス違反になる場合があります。
  2. Google Fontsやフリーフォントを利用： Google Fontsなどからフォントを入手
  3. フォントをサブセット化： 以下のツールを使って、使用する文字だけを含んだフォントファイルを生成
  4. Webサーバーにアップロード： .woff や .woff2 ファイルをサーバーに配置
  5. CSSで読み込む： 
    @font-face {
font-family: 'MyCustomFont';
src: url('/fonts/myfont.woff2') format('woff2'),
   url('/fonts/myfont.woff') format('woff');
font-display: swap;
}
  6. 通常のCSSでフォントを適用 
    body {
font-family: 'MyCustomFont', sans-serif;
}

まとめ：最速でWebフォントを表示するには？

  • Adobe Fontsを使う場合は font-display: swap や preconnect を必ず設定
  • 必要なスタイルだけを選んで読み込みコストを削減
  • こだわるならWebフォントをサブセット化して自前でホスティング

どの方法を選ぶかは、パフォーマンス重視か？ デザイン重視か？によって異なります。ユーザー体験を意識した最適な方法を選んで、より高速で美しいWebサイトを実現しましょう。

　
※参考にされる場合は自己責任でお願いします。

Adobe Fonts 読込遅延
関連記事