Springfalfal

【サイト表示速度向上】Google Fontsの使い方〜インストール編〜

googlefonts　ロゴ

今回はGoogle FontsをCDNで利用するのではなく、

あなたのサイトにインストールして使用することで、

サイト表示の際に外部に接続することなくフォントを適用し、レンダリングブロック時間を短縮し、サイト読み込みを早くするための方法を紹介します。

サイトの表示時間は2.5秒以上で離脱率が急激に上がることが知られているので

SEOの一つの基準をクリアするためにはとても大きな違いが生まれます。

CDNとインストールの違い

一言で言うと、

「ファイルを外部のサーバーから借りてくる（CDN）」か、

「自分のプロジェクト内に所有する（インストール）」かの違いです。

CDN (Content Delivery Network)とは？

インターネット上にある、配信専用の高速なサーバー（CDN）に配置されているファイルのURLをHTMLに記述して読み込む方法です。

イメージ： 必要な時に、毎回外部の図書館から本をWeb経由で参照する。

インストール (ダウンロード / ローカル配置)とは？

公式サイトからファイルを直接ダウンロードし、

自分のパソコン（プロジェクトのフォルダ内）にファイルを保存して読み込む方法です。

イメージ： 本を購入して自分の本棚（フォルダ）に置き、そこからいつでも読めるようにする。

表示速度の違い

CDNでも表示速度が遅いと感じることは少ないかもしれません。

ただ、サイト全体の表示速度を極限までチューニングするプロの現場や、

WordPressの自作テーマでファイルを1つにまとめて管理したい場合は、

ローカルにインストールした上で、サイト丸ごと自前のCDN（Cloudflareなど）のキャッシュに乗せる

というアプローチが最強の速度を生み出すため、最終的なステップとしてはこちらがよく使われます。

特に、Google Fontsだけでなく様々なCDNを利用する場合、

外部サーバーへの接続回数が多くなります。

その際に全て自分のサーバーにインストールしていると外部サーバーへの接続回数を劇的に減らせます。

Google Fontsをインストールする

google webfonts helperにアクセスする

google webfonts helper

使用したいフォントを探す

画面左上の検索画面に使用したいフォント名を入力します。

google-webfonts-helper　トップページの検索欄を示した画面

使用したいフォントを見つけたら、そちらをクリックします。

すると、フォント詳細ページに移動します。

インストール方法

  • １　【Select charsets】の項目で使用したい字体を選択します。（今回は日本語を使用したいので【Japanese】を選択）
  • ２　【Select styles】の項目は16のままで大丈夫です。
  • ３　【Copy CSS】の項目に書かれたフォントを適用するためのCSSコードをコピーします。
  • ４　【Download files】の項目からフォントを使用するためのファイルをダウンロードします。
google-webfonts-helper フォント詳細ページ　インストール方法を示した画面

サイトに適用する

まずあなたのサイトフォルダにgoogle-webfonts-helperでコピーしたCSSコードを貼り付けた【fonts.css】ファイルを作成します。

/* sawarabi-mincho-regular - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sawarabi Mincho';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sawarabi-mincho-v20-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

次に、【fonts.css】ファイルの一つ上の階層に【fonts】フォルダを作成します。

そして、google-webfonts-helperでインストールした圧縮ファイルを解凍します。

その中に【.woff2】という形式のファイルがあるのでこのファイルを作成した【fonts】フォルダに貼り付けます。

root
|___【index.html】
|___css
|___【style.css】
|___【fonts.css】
|___fonts
|___【.woff2】

あとは、style.cssのフォントを使用したい部分に次のように記載するだけで、フォントを適用できます。

body {
font-family: ‘Sawarabi Mincho’, sans-serif;
}

一つのフォルダでまとめて管理したい場合

「【fonts.css】と【.woff2】の位置関係を気にするのが面倒」

「サイトフォルダをきれいに整理しておきたい」

という方には、次の方法がおすすめです。

まず、

【fonts.css】にコピペしたコードのsrcの部分を次のように変更します。

src: url(‘./amaranth-v19-latin-regular.woff2’) format(‘woff2’);

そして、【fonts.css】を【fonts】フォルダに移動させます。

こうするだけで、

１つの【fonts】フォルダだけで【fonts.css】と【.woff2】の二つのファイルをまとめて管理できます。

root
|___【index.html】
|___css
　　 |___【style.css】
|___fonts
　　　|___【.woff2】
　　　|___【fonts.css】

私は、この方法で管理しています。

まとめ

Google FontsをCDNで使用する方法が一番楽なのは確かですが、

ページの表示速度2.5秒以内

この基準に合わせるなら、この方法が一番おすすめだと思うので、ぜひ検討してみてください！

学習記録一覧へ

Automation

関連記事