Google Fonts の読み込みを高速化のアイキャッチ画像

Google Fontsの読み込みを高速化する方法 | フォントが重い・遅い問題を解決する

皆さんのサイトではWebフォントを利用していますか?フォントはWebサイトに彩りを与えてくれるものでのフォントを使い分けて表示していることも多いでしょう。今回はそのなかでも利用する人が多いであろう Google Fonts を利用する方に向けての記事になります。あなたのサイトにおいてフォントがサイトの速度を落とす原因になっているかもしれません。

Google Fontsについて

Google Fontsのタグを配置する

Google Fonts は Webフォントのなかでも特に有名で利用されている方も多いでしょう。あまりにも利用方法が簡単なこともあってすぐに導入しがちですが、公式サイトに記載の方法でそのまま利用するとWebサイトの速度を遅くする原因になる可能性があります。しかし少し工夫をすることで速度を改善させることができます。表示が遅くなる原因はフォントに含まれる文字の数です。特に日本語が含まれるフォントは非常に重いです。英語と違って日本語は字が多いためです。

Google Fonts の使い方はさておき、公式からフォントを利用する場合、HTMLのヘッダに以下のタグを配置するように言われることでしょう。これをそのまま利用する時点で落とし穴にはまっています。注意しましょう。

<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" rel="stylesheet">

フォントファイルは重い?

まずフォントファイルはそこまで重いのでしょうか?まずは実験してみましょう。

https://fonts.googleapis.com/css2?family=Rampart+One&display=swap にアクセスします。アクセスするとフォントファイルの実体が含まれています。

※ ここでは link タグの preconnect のことは考えていません

ファイルサイズ 113KB という結果になりました。113KB は重いのか?ということについてですが、上記のスクリーンショットの画像サイズは 46KB になります。こんな細かいこと考えるの面倒だと思うでしょうが、まあ特にフォントは常に読み込まれますからね。積み重ねだったりします。当然ですがフォントによってサイズの差はあります。ご注意ください。

ひとまずこのタグを読み込むとフォントが自由自在に使えるようになるわけですね。

このように使うことができます



高速化の方法について

方法1. ユーザの端末にフォントをインストールする

これが最も高速化を期待できる方法になります。ユーザの端末にフォントがあれば、ローカル環境に読みに行くだけなので高速です。デフォルトのフォントが早いのはユーザの端末内にあるフォントで外部に読み込みに行く必要がないためです。残念ながらOSを開発する会社には所属していないため、デフォルトでフォントを増やしてあげることはできなさそうです。

余談ですが、デフォルトのフォントは大量の文字セットを含んでいます。例えばヒエログリフなんていかがでしょう。これは文字なのでコピペすることができます。試してみてください。

𓅨𓅭𓅓

上記のヒエログリフは https://hieroglyph.sacnoha.com/ 様より引用させていただきました。ありがとうございます。

※ 表示されない方は未対応です。

方法2. Googleのサーバから取得せず、自身のサーバから読み込む

大前提としてGoogleのサーバは超高速早いですが、それでも通信のオーバヘッドの関係でローカルに置いたほうがいいです。ローカルにおいて同様に読み込ませることでGoogleにアクセスさせることなくフォントを読み込むことができます。デメリットはフォントがサーバにおいたままであれば更新されないことでしょうか。

ここでは一般的な方法を紹介しておきたいと思います。使いたいフォントをダウンロードします。

ダウンロードしたら ttf ファイル(TrueType)が格納されているので、これを woff に変換しておきましょう。変換するサイトは何でもいいですが、今回は TTF to WOFF というサイトを利用させてもらいました。 woff形式にすることでフォントファイルのサイズをWebサイト用に最適化することができます。

RampartOne-Regularが今回の変換元
変換してダウンロードする

ダウンロードした ttf と woff の二種類のファイルをサーバ上の任意の位置に配置します。 /wp-content/myfont/ のディレクトリの配下に配置したとしましょう。そしてCSSから @font-face を利用して読み込みます。下記のように指定することでwoffが利用できる環境ではwoffを、そうでない環境ではttfを利用することが可能になります。

@font-face {
  font-family: 'Rampart+One';
  src: url('/wp-content/myfont/Rampart+One.woff') format('woff'),
  url('/wp-content/myfont/Rampart+One.ttf') format('truetype');
  display: swap;
}

こうすることでCSSのfont-family として利用できるようになります。これでブラウザは外部サーバを利用せずに自身のサーバからフォントを取得できます。

body {
  font-family: ''Rampart+One', sans-serif;
}

方法3. サブセット化して取得する

利用には制限がありますが、最もおススメできる方法なのではないかと思います。GoogleのURLのパラメータに利用する文字だけを指定することで、指定した文字だけを切り出してフォントを取得(サブセット化)させることができます。利用方法ですが、前述したURLにtext={利用したい文字列}を追加するだけです。例えば、先ほど利用した Rampart One で「このように使うことができます」という文字を使ったのでタグの指定はのようになります。

<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap&text=このように使うことができます" rel="stylesheet">

このURLからCSSファイルをダウンロードすると...

ファイルサイズ 113KB → 312 B まで減りました。

ファイルサイズが 312バイトまで減らすことができました。うれしいですね。この積み重ねがサイトの速度の向上につながるというわけです。サブセット化するデメリットはサブセットであることです。すなわちサイト全体で使いたい!であれば、事前にどの文字を使うかを決めることができません。なのでフルでダウンロードするしかありません。その場合は方法2を用いるとよいでしょう。

また方法2と方法3の速度の比較ですが、やはりローカルにおいた方法2が高速になるとは思われます。ネットワーク通信が行われずにフォントが取得できるメリットは非常に大きいです。ただサーバサイドに手を加える必要があるという観点から、方法3のほうがお手軽で限定的にフォントを利用できるのでおすすめというところです。どちらでも高速化されることは間違いありません。ぜひ試してみてください。

小技の紹介

ここではほんの少しだけ高速化する小技を紹介します。いずれもGoogle FontsをWebからダウンロードしている場合の技です。ローカルにおいた場合は適用できません。

preconnect

ブラウザの仕組みを利用してリソースの先読みをすることができます。以下のタグの上二つの link rel="preconnect" というタグが先読みをさせるための命令です。詳しい方向けに何を実施しているかといういうと、名前解決とTCPコネクションの確立を事前に実施してくれるというものです。微々たる効果かもしれませんが、フォントは必ず使うものなので付与しておいて損はないでしょう。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" rel="stylesheet">

display=swap

Googleフォントのダウンロード時に初期から付与されていますが、URLパラメータにdisplay=swap をつけることで表示速度が改善されます。これはフォントを取得するまでは、端末のデフォルトフォントを表示しておいて、取得が完了したら指定したフォントに切り替えるというものです。途中でフォントがガクッと変わるため違和感を感じる可能性がありますが、小技としてどうぞ。

複数フォントの読み込み方

複数のフォントを読み込みたい場合、フォントの読み込みのための link タグを一つにまとめてしまいましょう。

例えば、二種類のフォントをまとめたい場合ですが、このように書かずに...

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight&display=swap" rel="stylesheet">

以下のように family 属性にまとめて記載することができます。これをするだけで通信回数が減らすことができます。preconnect も一度だけ記載すれば十分です。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght&family=Rampart+One&display=swap" rel="stylesheet">

まとめ

さていかがだったでしょうか。Google Fonts を利用している人でもサブセット化を行えばサイトの速度向上につながります。ぜひお試しあれ。

ちなみにフォントを利用せずに画像にしてしまうという手段もあります。ヘッダーやフッターなど変化しにくい場所はこの方法でもよいでしょう。どちらの方が良いかはフォントサイズと画像サイズの比較になるので一概には言えませんが、そういう手段もあるのだなと理解して捉えてくれればいいと思います。

以上です。それでは次の記事でお会いしましょう👋