こんにちは、ワタナベです！
じめじめとした天気が続いておりますね(;´∀｀)
今回はGoogle Fontsを非同期で読み込む方法を簡単にご紹介いたします。
Google Fontsにはオシャレで素敵なフォントがたくさんありますが、サイトが重たく（表示スピードが遅く）なってしまいますね。
そこで「Web Font Loader」を使って非同期で読み込めば、フォントの読み込みで表示スピードを遅くしている原因の１つのレンダリングのブロックが解消されます！
Web Font LoaderでGoogle Fontsを読み込む方法
Web Font Loaderとは、GoogleとTypekit が共同開発したJavascriptライブラリだそう。
なんと、かの有名ブラウザIEにも対応している…！
それでは、Webサイトで「Noto Sans JP」を使用するとします。
コードは以下。
<script></script>で囲んでいますが、全ページで使用する場合は、common.jsなど全ページ共通のjsファイルにぶち込むのが良いでしょう。
<script>
window.WebFontConfig = {
google: { families: [‘Noto+Sans+JP‘] },
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>
google:{families:[‘ ここにフォント名 ‘]}, を入れます。
Noto Sans JPは、URLがhttps://fonts.google.com/specimen/Noto+Sans+JPとなっているので、
https://fonts.google.com/specimen/Noto+Sans+JP
↑URLの最後尾（オレンジ部分）をコピー。
スタンダードな読み込み方法の、
<link href=”https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap” rel=”stylesheet”>
↑の部分からコピーでも大丈夫です。
とにかくURLの部分にフォント名があるのでそこからコピーすれば大体OKです（大雑把！）
これでjsの方は完了です。
あとはcssで
body{
font-family: ‘Noto Sans JP’, sans-serif;
}
などと記述してやればOK！！！！！
簡単ですね。
複数読み込む場合
google: { families: [‘Noto+Sans+JP‘,’Noto+Serif+JP‘] },
カンマで区切ればOK！
フォントウェイトを指定した場合
google: { families: [‘Noto+Sans+JP:400,500,700‘,’Noto+Serif+JP:400,500,600‘] },
フォント名のあとにコロンを付け、ウェイトを指定。
こちらもカンマで複数指定が可能です。
以上になります。
簡単に読み込み方法だけご紹介しました。
その他設定、ちらつき（Webフォント読み込み～読み込み完了のフォントの切り替わり）対策などは今回参考にした下記サイト様からご参照ください。
とても分かりやすいです(/・ω・)/
それではまた次回。
ご閲覧ありがとうございましたm(__)m
