Adobeの日本語Webフォントをサイトを遅くせずに導入する方法

byNatchan -7月 07, 2023

0

Adobeの日本語Webフォントはとても読みやすいですが、導入するとサイトの読み込みが遅くなります。今回は、表示速度を落とさずに日本語Webフォントを使う方法を教えます。AdobeのWebフォントを導入したらサイトが重くなってしまった、日本語Webフォントを使いたいけどサイトを遅くしたくない人向けの内容です。

{tocify} $title={Table of Contents}

無料配布中！当サイトの運営者Natchanが制作したフリー素材を『イラストAC』にて無料でDLできちゃいます( ^o^)⊃―☆{codeBox}

Adobeの日本語Webフォントが重い原因

Adobe Fontsの日本語Webフォントが重い主な原因は下記の2つです。

1．日本語は他言語に比べて文字の種類が多い

2．Webフォント導入時の設定が最適化されていない

1つ目は、日本語はひらがな/カタカナ/漢字と他言語に比べて文字の種類と文字数が断然多いことが要因です。その分、日本語フォントは読み込むフォントの容量が大きくなるため、アルファベットだけで済む英語フォントとは読み込み速度が全然違います。

2つ目は、Webフォント導入時の設定がデフォルトのままになってしまっていることが要因だと思われます。設定1つ変えるだけでサイトのスピードが多少なりとも速くできるのでやり方を次で教えます。

サイトスピードを測れる2大ツール：

PageSpeed Insights

GTmetrix

Webフォントの表示速度を上げる導入方法

それでは、AdobeのWebフォントをサイトの読み込みを遅くせずに導入する手順を説明します。AdobeのWebフォントを使ったことない人でも参考になると思います。

STEP1：Adobeフォントをアクティベート

Adobe Fontsからお好きなフォントを選んだら、そのフォントのページを開いて「〇個のフォントをアクティベート」のスイッチをONにしてアクティベートしてください。正常にアクティベートされると「〇個のフォントがアクティブ」という表示に切り替わります。

Webフォントは本文・太字・見出しなど様々な使われ方をされるので太さは2種類入れた方がいいです。左サイドにあるフィルター内「書体の属性」のファミリー内のフォントの数を2以上に設定すると2以上のスタイルを持つフォントのみ表示されます。アクティベートするときは多くても3つまでにしてください。{alertInfo}

STEP2：Webプロジェクトの作成＋追加

次に、アクティベートスイッチの下にある「Webプロジェクトに追加」を押してください。プロジェクト名を入力したら本文、太字に適した太さを選んでチェックを入れて作成ボタンを押します。

チェックを入れるのは2つのスタイルで十分なので、サイトに適用する適切な太さのフォントだけを選んでください。

STEP3：2つのコードをコピー&ペースト

作成ボタンを押すと、2つのコードが出てきます。1つ目の<script>から始まるコードをコピーしたら、ブログテーマの<head>タグ内に貼り付けてください。2つ目の各CSSコードをサイトに追加したらWebフォントが反映されているはずです。

WordPressなら外観→カスタマイズ→追加CSSから貼り付けてください。貼り付けた後、まだ終了ボタンを押さないでください。

WordPressで運営している場合は、Simple Custom CSS and JSという直接テーマをいじらずにコードを入れられるプラグインをインストールすることをおすすめします。慣れていない人が直接テーマをいじるのはリスクが高いからです。

このプラグインを使った詳しいコードの貼り付け方をSTEP4で説明します。コードの設置が済んだ人はSTEP5に移ってください。

STEP4：プラグインを使ってコードを貼り付ける方法

Simple Custom CSS and JSをインストールしたら、ダッシュボードのサイドバーに「カスタムCSS&JS」という項目が追加されるので「カスタムHTMLの追加」を押して1つ目のコードを貼り付けてください。貼り付けたら公開ボタンを忘れずに押してください。

次に「カスタムCSSの追加」を押して2つ目の各CSSコードを貼り付けたら公開ボタンを押します。もしWebフォントを削除したくなったら、コードの一覧から無効にしてゴミ箱に移動するだけなので簡単に消せます。

STEP5：最後にフォント表示の設定を変える

「プロジェクトを編集」ボタンから編集画面になるのでフォント表示を「swap」に切り替えたら変更を保存ボタンを押します。これだけでPageSpeedInsightsの警告文が消えてスコアが上がります。

プロジェクトの編集画面はプロフィールアイコン下の「フォントを管理」→「Webプロジェクト」→「プロジェクトを編集」からいけます。

これで、完了です。お疲れ様でした！

最後に｜サイトの読み込み速度を改善するために

Adobeに限った話ではないですが、日本語のWebフォントを1つでも導入したら他フォントの導入は諦めたほうが賢明です。Adobe Fontsは魅力的なフォントがたくさんあるので、色々使いたくなってしまう気持ちはわかりますが、日本語のWebフォントはサイズが大きいので1つ入れるだけでサイトスピードが結構落ちます。

今回説明した「フォント表示」の設定を切り替えるだけで、それほど遅くならずに済みますがそれでもWebフォントを入れない方がサイトの読み込みは速いです。

サイトスピードはユーザーを離脱させないためにもとても重要な指標の1つなので、サイトを重くしないように意識しながらコンテンツを発信していくことが大切です。

最後までお読みいただきありがとうございました。