webfontは使いたいけど重くて使いづらい。そんな悩みを解決するWebFontLoader

はじめに

• LPやWeb制作を行う上で大事なフォント。高級感のあるフォント、信頼感をイメージ付けるフォントなど、そのサイトのイメージにあったフォントを選ぶことでユーザーに与える印象は大きく変わります。
• そこでよく使われるのがGoogle Fontsです。無料で使える上に、導入がとても簡単なのがいいですよね。でもGoogle Fontsのデメリットはなんといっても重い、つまり表示に時間がかかってサイトの読み込みに影響が出てしまうこと。
• そんなGoogle Fontsを非同期で読み込んでサイトの読み込みスピードを上げる方法を書いていきたいと思います。

通常のGoogle Fontsの使い方

• 通常はGoogle Fontsにアクセスして読み込みパスを取得、使いたいサイトのhtml、もしくはcss内に追記して使います。

Robotoの場合

• Google Fontsでよく使われているRobotoを使用したい場合、下のように読み込みパスを追加する必要があります。

htmlの場合

<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=Roboto:wght@400&display=swap" rel="stylesheet">

cssの場合

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

• あとはcssでfont-family: 'Roboto'を指定します。

font-family: 'Roboto', sans-serif;

• コードとしてはたったこれだけですが、指定したURLからcssをダウンロードしてくるのでどうしても読み込み速度が遅くなりがちです。
• Webフォントは種類が豊富で魅力的ですが、その反面上記のような読み込み速度が問題になります。

Web Font Loaderの使い方

• Google Fontsを使用したサイトの表示をより早く（読み込みを短く）するために有効なのがWeb Font Loaderによる非同期での読み込みです。

window.WebFontConfig = {
  google: {
    families: ['Roboto']
  },
  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);
})();

• families: ['Roboto']で使用したいGoogle Fonts名を指定します。
• font-weightを指定する場合は、[Roboto: 300,400,500,700]のように記載します。
• 日本語フォントの場合はfamilies: ['Noto+Sans+JP']のように、間にあるスペースを+でつなげます。
• 複数フォントを使用する場合は、families: ['Noto+Sans+JP', 'Roboto']とカンマでつなげることで使用できます。
• LP一枚だけに使用する場合は上記のコードをインラインなどで直接記載してもいいかと思いますが、複数ページ使用する場合は外部ファイルに切り分けて呼び出す形でも便利です。

webFontAjaxLoader.js

function webFontAjaxLoader(font) {
  window.WebFontConfig = {
    google: {
      families: font
    },
    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);
  })();
}

• 呼び出し元でwebFontAjaxLoader(['Roboto', 'Noto+Sans+JP']);と使用したいフォント名を引数に渡してあげればOK。
• あとは通常の使い方と同じようにcssでfont-family: Roboto, 'Noto Sans JP';と指定すればGoogle Fontsを使用できます。
• Google Fontsの読み込みパフォーマンスを上げることはサイト表示速度を上げるのに効果的です。ご興味のある方はぜひ試してみてください。