@importでの読み込みは遅くなる
@import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap‘);
この方法はCSSから、さらに上記URLに読み込みにいってしまうためページの読み込み速度を下げてしまいます。
（参考：CSS @import を使用しない）
Web Font Loaderを使ってフォントを非同期で読み込みます。
Googleフォントは、フォント名を指定するだけで非同期で読み込めるんです。
このコードを</body>タグの手前にコピペします。
<script>
window.WebFontConfig = {
google: { families: ['M+PLUS+Rounded+1c:400,600'] },
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);
})();
</script>
コード3行目の「families」に、フォントを指定します。
‘M+PLUS+Rounded+1c’のように指定
複数指定する場合は、カンマで区切って指定
‘M+PLUS+Rounded+1c’, ‘Noto+Sans+JP’
下記CSSを追加する
html * {
visibility: hidden;
}
html.wf-active *{
visibility: visible;
}
Web Font Loaderを使用すると、自動で<html>にクラスが付与されます。そのクラスを利用して、読み込みが完了するまでは非表示のCSSを記載します。
/* ダウンロード実行時 */
<html lang="ja" class="wf-loading">
/* ダウンロード完了時 */
<html lang="ja" class="wf-active">