Googleフォントをサブセット化してページの読み込みをスムーズに
おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！
↑私が10年以上利用している会計ソフト！
Googleフォントの設定
まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。
続いて見本の右側にある「Select this style」をクリック。
HTML
画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。もし画面右側にリストが出てこない場合は、ページ右上にある四角と＋マークのアイコンをクリックすると表示されますよ。
<link> 部分に書かれたコードを、HTMLファイルの head 内に記述します。
<head> <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"> </head>
CSS
「CSS rules to specify families」に書かれたコードを、CSSファイルの、フォントを適用させたい要素に対して記述します。この例では見出しのテキストのみ「Kosugi Maru」に設定したいので、h2 タグのみフォントが適用されるよう、CSSでも指定するセレクターを限定しておきましょう。
h2 {
font-family: 'Kosugi Maru', sans-serif;
}
見出し部分が指定した「Kosugi Maru」フォントで表示されます。
しかしこのフォント、普通にダウンロードするとデータ容量が2.6MBあってかなり重たいんですね…。
必要な文字だけ読み込ませる
できるだけ無駄な読み込みを省きたいので、実際に使う文字だけ抜き出すサブセット化をしてみましょう。難しい設定や余計なツールは不要です！Googleフォントを読み込ませるときにHTMLの head 内に記述したURLの display=swap の後に &text= に続けて必要な文字を入力するだけ！CSSへの追記は必要ありません。ここでは見出しテキストの「Webフォントを使おう」を設定しています。
HTML
<head> <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=Kosugi+Maru&display=swap&text=Webフォントを使おう" rel="stylesheet"> </head>
See the Pen
Google Fonts Subset by Mana (@manabox)
on CodePen.
こんな感じで表示されます。（「Webフォントを使おう」以外の文字を入力すると、指定したWebフォントで表示されません。）
ビフォー・アフター
表示自体は変わりがありませんが、読み込み速度は早くなっています。PageSpeed Insightsで計測してみると、テキストのみのページなのであまり差はないように見えますが、サブセット化前は91。サブセット化すると100をマークできました。
サブセットに含める文字が多くなると指定も長くなってしまいますが、ナビゲーションメニューなどの決まったテキストにだけ適用させたいときは使えそうですね！
