グーグルフォントが重すぎるので読み込みを早くしたい場合の対処方法を紹介します。
先に結論です。Google Fontsが重い原因の大半は「使わないウェイトまで読み込んでいる」「フォントCSSの取得を待ってから本文が描画される」の2つです。現在は、<link>にdisplay=swapと必要なウェイトだけを指定し、preconnectで接続を先に済ませる方法が最も手軽で効果があります。この記事で紹介しているWeb Font Loader(webfont.js)によるJavaScript読み込みは今でも動きますが、追加のスクリプトを1本読む分だけ遅くなるため、まずはlinkタグ側の見直しから始めてください。
現在おすすめの書き方(linkタグでの軽量化)
Google Fontsの「Get embed code」で出るコードをそのまま貼ると、選んだウェイトがすべて含まれます。必要なものだけに絞り、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=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">wght@400;700のように、実際に使うウェイトだけを列挙する。日本語フォントは1ウェイトが数MBになるため、ここが一番効きますdisplay=swapで、フォント取得中も代替フォントで本文を先に表示する(文字が見えない時間をなくす)preconnectで、CSSとフォントファイルの配信元への接続を先に確立する
見出しなど一部だけにWebフォントを使うなら、&text=で必要な文字だけに絞る方法もあります。font-familyの指定やフォールバックの書き方はCSSでフォントを指定する方法を参考にしてください。
Google Fontsを軽量化して読み込みを早くする方法
@font-faceでGoogle Fontsのファイルを自前配信(セルフホスト)する方法もあります。配信元への接続が減るので最速になり得ますが、フォントファイルの管理とライセンス表記を自分で行う必要があるため、手軽さでは上のlinkタグ方式が勝ります。
JavaScriptで非同期に読み込むと、フォントの読み込みがページ本体の描画をブロックしなくなります。以下はWeb Font Loaderを使う従来の方法です。
JavaScriptで非同期で読み込むコード
// google fontsを非同期で読み込み
window.WebFontConfig = {
google: { families: ['Noto+Sans+JP', 'Overpass'] },
// google: { families: ['Noto+Sans+JP:300;400;500;700', 'Overpass:200;300;400;600;700;800'] },
active: function () {
sessionStorage.fonts = true;
},
};
(function () {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
上記をbodyの閉じタグの直前に配置します。
webfont.jsは読み込み完了時にhtml要素へwf-activeなどのクラスを付けるので、フォント適用後だけスタイルを切り替えたいときに使えます。一方で、フォントが適用されるまで代替フォントで表示され、適用の瞬間に文字が切り替わる(レイアウトが動く)ことがある点は承知しておいてください。
フォントをまるまる指定する場合
window.WebFontConfig = {
google: { families: ['Noto+Sans+JP', 'Overpass'] },
active: function () {
sessionStorage.fonts = true;
},
};
上のように、googleのfamiliesにフォント名を指定します。
フォントを複数指定する場合
window.WebFontConfig = {
google: { families: ['Noto+Sans+JP'] },
active: function () {
sessionStorage.fonts = true;
},
};
googleのfamiliesは配列をとるので、カンマで区切って指定数を増やせます。
フォントのweightを指定したい場合
// google fontsを非同期で読み込み
window.WebFontConfig = {
google: { families: ['Noto+Sans+JP:300;400;500;700', 'Overpass:200;300;400;600;700;800'] },
active: function () {
sessionStorage.fonts = true;
},
};
フォントのweightを指定したい場合は、上のように指定します。
使うフォントウェイトが決まっている場合はこちらの方がパフォーマンス的にはいいです。
軽量化しても遅いときの確認
- DevToolsの「Network」でフォントのファイルサイズと本数を確認する。日本語フォントを3ウェイト以上読んでいたら、まず減らす
- Lighthouseで「Ensure text remains visible during webfont load」が出ていたら、
display=swapが付いていない - フォント切り替え時にレイアウトが動く(CLS)なら、代替フォントの
font-sizeやline-heightをWebフォントに近づける - スマホだけ表示が崩れる場合はフォントではなく高さの問題のこともあります。スマホで100vhがはみ出るときの対策も合わせて確認してください