Google Font 読み込み遅延の原因

どういうことか説明していきます。

皆さん、Googleフォントを使う際、htmlファイルのheadタグ内に下記コードを記述していませんか？

1. <link rel="preconnect" href="https://fonts.googleapis.com">
2. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3. <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">

Google Font は特定のwebサーバーにCSSファイルが置いてあって、そのファイルをダウンロードすると、スタイルが適用される仕組みです。

これはつまり、リクエスト→レスポンス→ダウンロードという手順を踏むことを意味します。図にすると下記のようなフローになります。

サーバーへのリクエスト通信が発生する上に、ファイルのダウンロードが終わらないと、ブラウザのレンダリングが始まらないことが、遅延する原因になるのですね。

高速化の概要

Google Font が遅延となる原因は、リクエスト・ダウンロード・レスポンスの仕組みということがわかりました。

結論、あります。

シンプルに言うと、サーバーにそのフォントをアップロードしてしまえば良いのです。ではなぜサーバーにアップすると原因を排除できるのか？

webサイトで目にするフォントは、そのブラウザがそのフォントをサポートしていれば表示できますし、サポートしていなければ表示できません。

サポートしていないものは、外部フォントとして取り扱われます。

外部フォントである以上、どこからか引っ張ってこなくてはならない。

引っ張ってくる際に、すでにダウンロードされたフォントファイルが、そのサイトのwebサーバー内にあったらどうでしょう？

遅延する原因となっていたリクエスト・レスポンス・ダウンロードがなくなりますね。

これが高速化の概要となります。

実践方法

まず、Google Font サイトにアクセスして、使いたいフォントをダウンロードしてください。ダウンロードは右上のボタンから可能です。

ダウンロードしたファイルは、.ttfという拡張子がついています。

これをサーバーにアップして、一件落着！！！

とはなりません。

やることはもう三つあります。

• フォントのライセンス関係を確認する
• フォントファイルをコンバートする
• CSSファイルにwebフォントを登録・設定する

フォントのライセンス関係を確認する

Google Fontは、Google社が提供する完全無料・登録不要のWebフォントサービスです。商用利用もできるため、幅広く活用できますが、権利関係(「商用利用の可否」「利用できるWebページの種類」「再配布」などに関する規約)は念の為確認しておきましょう。この癖をつけておくと、Google Font以外のwebフォントを使用する場合にも重宝します。

フォントファイルをコンバートする

フォントファイルと一口に言っても実は様々なものがあります。パソコン用に適しているもの、web用に適しているもの、対応しているブラウザの違い、などがあり、それによってファイルの拡張子が異なります。

各フォントファイルの詳細は下記サイトで詳しく説明されています。めんどくさがらずに読むと、エンジニアとして少し成長します。

ダウンロードしたttfファイルをコンバート(変換すること)する方法はいくつかありますが、WOFFコンバータというソフトウェアを紹介します。

まずこちらのサイトにアクセスして、ソフトをインストールしてください。

インストールが終わったらソフトを起動します。

• 変換するファイルを選択します
• 変換後のファイルの保存場所を指定します
• WOFF2とEOTにチェックを入れます
• 変換開始をクリックすれば、瞬時に変換が終了します

コンバートしたファイルは、webサーバーにアップします。当サイトはWordPressを使用しているので、今回はその方法を紹介します。FTPでサーバーに接続し、wp-includes/fontsディレクトリの中に入れます。

CSSファイルにwebフォントを登録・設定する

さて、ここまで来たらもう一息です。サーバーにアップしたフォントファイルをCSSの@font-faceクエリを使って、オリジナルフォントとして取り扱えるようにします。

適用したいCSSファイルに次のように記述してください。

1. @font-face {
2.   font-family: "Quicksand";
3.   font-display: swap;
4.   src:
5.   url("https://example.com/wp-includes/fonts/Quicksand-Bold.woff2")format("woff2"),
6.   url("https://example.com/wp-includes/fonts/Quicksand-Bold.woff")format("woff"),
7.   url("https://example.com/wp-includes/fonts/Quicksand-Bold.eot")format("eot"),
8.   url("https://example.com/wp-includes/fonts/Quicksand-Bold.ttf")format("truetype")
9.   ;
10. }

urlでは、ファイルのパスを指定しますが、wordpressを利用されている方は、example.com部分をご自身のサイトURLに置き換えてください。

あとは、適用したい要素にfont-family: “Quicksand”;を指定すると、サーバーにアップしたフォントファイルを通して、ブラウザがフォントを適用してくれます。

なお、@font-faceではfont-weightなども設定できるので、気になる方はMDNで詳細をご確認ください。

@font-faceで設定したフォントは、cssファイルだけでなく、htmlファイルやjsファイルからでもアクセス可能です。例えば下記のような記述でも適用されます。

1. <div style="font-family: Quicksand;">Quicksand</div>

1. document.querySelector('div').style.fontFamily = "Quicksand";

本当に高速化されたのかを確認するには、PageSpeed Insightsで確認すると良いでしょう。スコアが上がっているはずです。