GoogleFontsを使うならWeb Font Loaderで読み込もう

Web Font Loaderを使うと以下の様な利点があります。

• 非同期での読み込みによるサイト速度の向上。
• 読み込み完了時に付与されるクラスによって、フォントのチラつき防止や読み込んでからJSで操作などが可能。

GitHub - typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.

Web Font Loader gives you added control when using linked fonts via @font-face. - GitHub - typekit/webfontloader: Web Font Loader gives you added control when u...

github.com

使い方

以下のJavaScriptを編集し設置するだけです。

var WebFontConfig = {
  google: {
    families: ['Noto Sans JP', 'Noto Serif JP']
  }
};
(function (d) {
  var wf = d.createElement('script'), s = d.scripts[0];
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.async = true;
  s.parentNode.insertBefore(wf, s);
})(document);

「WebFontConfig」内の「families」の中身に使用したいフォント名を記載します。
（フォント名は「GoogleFonts」→使用したいフォント→「+ select this style」→「CSS rules to specify families」の部分）

後は通常通りCSSで「font-family」を設定するだけです。

.noto-sans {
  font-family: 'Noto Sans JP';
}

.noto-serif {
  font-family: 'Noto Serif JP';
}

付与されるクラス

フォントの状況によって以下のクラスが「html」タグに付与されます。

ちらつき防止

非同期で読み込んだフォントがロード中に変わってしまうことで文字がチラつくため、付与されるクラスを利用することで対処できます。

以下は文字を透明にしておきロード完了次第表示する例です。

.noto-sans {
  font-family: 'Noto Sans JP';
  opacity: 0;
}

.wf-inactive .noto-sans {
  opacity: 1;
}

他にもプロパティ「display」や「visibility」で切り替えを行う方法もあります。
文字サイズが変わることなどによってちらつく場合などもあるため、レイアウトにあった方法を使いましょう。