【Google Fontsの軽量化】グーグルフォントが重すぎるので読み込みを早くしたい

2022年4月9日JavaScript

グーグルフォントが重すぎるので読み込みを早くしたい場合の対処方法を紹介します。

Google Fontsを軽量化して読み込みを早くする方法

@font-faceでGoogle Fontsを軽量化する方法もありますが、ブラウザによって読み込めないなどの問題が発生しやすいのでおすすめできません。

JavaScriptで非同期で読み込むことによって、ページの読み込み速度を高速化させることができます。

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の閉じタグの直前に配置します。

フォントをまるまる指定する場合

  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を指定したい場合は、上のようにして指定することができます。
使うフォントウェイトが決まっている場合はこちらの方がパフォーマンス的にはいいです。