【備忘録】WEBフォント軽量化でページを爆速読み込み！

先日、どうしてもサイト全体で「Noto Sans」を使わないといけないという事があり、

WEBフォントを使用すると遅くなりがちなページ読み込みを

爆速でしてもらう為の軽量化（サブセット化）と、

サブセット化したファイルの読み込み方について、備忘録も兼ねて紹介します！

・そもそもなんでWEBフォントを軽量化するの？

欧米フォントはそもそも字数が少なく、

サーバーからWEBフォントを読み込んでも約250KB程度。

対して日本語フォントはひらがな、カタカナ、そして大量の漢字によって

容量が約16MBほどにまで跳ね上がります。

このおかげで、フォントの読み込みでサイトの表示が遅くなり･･･離脱…。

といった事態が起きてしまうわけです。

その為に行うのがサブセット化です！

・サブセット化の方法

以前、本ブログでも紹介した

<link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap&text=ここに使いたい文字" rel="stylesheet">

というhead内に使用する文字だけ記述する方法もありますが

こちらは見出しだけ、英字だけ、といった文字数が限られている場合に役立ちます！

今回紹介するのは

サイト本文全体でWEBフォントを使用する場合など

文字数がかなり多い場合に有効な方法になります。

①Googleからフォントファイルをダウンロード

Noto SansのDLページはこちらになります。

▼Noto Sansのダウンロードページ
https://www.google.com/get/noto/#/family/noto-sans-jpan

②DLしたファイルから、使いたい文字だけ抜き出す

ひらがな、カタカナ、英数字はともかく

漢字って何が要るんだ！？となりますよね。

日本語には「常用漢字」と呼ばれる2136字があり、

通常の文章ではそれ以外の漢字を使用する事は滅多にありません。

「常用漢字」で検索すると簡単に一覧が手に入りますよ！

次に、サブセットフォントメーカーで

常用漢字＋ひらがな・カタカナ・英数字のみを抜き取ったフォントファイルを作成します。

私は下記のフリーソフトを使用してみました。

他にも検索すると沢山あるので、好みのものを使ってみてください。

▼サブセットフォントメーカーのダウンロードページ
https://opentype.jp/subsetfontmk.html

③ファイル形式を変える

DLした状態だと.otf形式になっているので、ブラウザ表示用の形式に変換しましょう！

この時最低限あると良いフォントファイル形式は以下です

.woff
主にPCのブラウザで使用
.ttf
主にスマホで使用

ファイル形式の変換についても

WEB上で行ってくれるフリーのサービスがあるので検索してみてください！

私が利用しているのはコチラ

▼Convertio — ファイルコンバーター
https://convertio.co/ja/

④フォントファイルをディレクトリに設置し、@font-faceで読み込ませる

前提として今回は

という階層になっています。

この状態で、CSSに@font-faceを記述してフォントを読み込ませます。

@font-face {
font-family: 'notosans';/*自分で好きな名前を付ける*/
src: url('../font/notosans_medium.ttf') format('truetype'), url('../font/notosans_medium.woff') format('woff'),
url('../font/notosans_bold.ttf') format('truetype'),
url('../font/notosans_bold.woff') format('woff');/*パスとフォーマットを指定*/
}

format(”)の中身は

.woffならwoff

.ttfならtruetype

と記述しましょう！

body {
font-family: 'notosans';/*@font-faceで指定した名前*/
}

最後にbodyにfont-familyを記述してあげれば設定完了です！！

まとめ

WEBフォントってオシャレで雰囲気があって、

游ゴシックじゃちょっと…という時に使いがちではないでしょうか？

是非サブセットを駆使して、

表示速度を最適化させたままWEBフォントを使ってみましょう！！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。