こんにちは。FASTCODINGデザイナーの七転び八重子です。
Webフォント（Google Fonts）って利用されている方多いと思いますが、例えば、サイトタイトルや見出しだけ利用しているといった場合は、全ての文字を読み込むと時間がかかります。そこで、必要な文字だけを指定する事（サブセット化）で軽量化する事で読み込み速度を短縮することができます。今回は、その方法をまとめてみました。
サブセット化とは？
サブセット化とは、「必要なフォントのみ抜き出す」事です。
フォントにはアルファベットや数字、記号など様々な文字が含まれていますが、全て使うわけでは無いので使う文字のみ抜き出して軽量化する事でページの読み込みがスムーズになります。
STEP① Googleフォントの設定
まず、設定したいフォントを[ Google Fonts ]から選びます。
日本語の場合は、[ Google Fonts + 日本語 ]
HTMLファイルへの記述
下記のコードを、HTMLファイルの＜head＞内に記述します
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
CSSファイルへの記述
CSSファイルの、フォントを適用させたい要素に対して記述します。今回は、h2見出しのテキストのみ「はんなり明朝」にしたいので、h2 タグのみフォントが適用されるよう記述します。
h2 {
font-family: "Hannari" sans-serif;
}
ここまでは、通常のGooglefontsの設定です。次にサブセット化してみましょう。
STEP② サブセット化の設定
サブセット化はとっても簡単です。先ほどHTMLファイルへの記述したURLに[ &text=必要な文字 ]を記述するだけ。
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css&text=必要な文字" rel="stylesheet">
まとめ
めっちゃ簡単な設定でしたね。ちょっとした事ですが、ページスピードスコアにも関係しますし、しっかり対策していきたいですね。
