Google FontsをWeb Font Loaderを使って非同期に読み込むtipsです。

Google Fontsを高速で利用する

Google Fontsは無料で美しいウェブフォントを利用でき、種類も豊富で、世界中のサイトで頻繁に導入されています。

Web Font Loaderを利用することで、非同期にレンダリングをブロックされることなくGoogle fontsを利用します。
Webfontオブジェクトを利用し、配列でフォント名を列挙して格納することで複数の読み込みを非同期に行います。
</body>の上部に以下の記述を挿入します。


WebFontConfig = {
  google: { families: [ 'Roboto','Dancing+Script:400,700:latin' ] }
};
(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

families: []の中に読み込みたいフォント名を記述します。

Googlefontsをさがす

googleフォントはいけてるフォントが多数存在しているので、好みのを見つけたり選定するのに苦労しますが、先人たちが目方をつけてくれています。
参考にすると目的のものに簡単にたどり着くことができますので、感謝です。合掌。

おわります。

tips

サイトを高速化。かんたんなスクリプトでfontawesomeを非同期読み込みする -『front-end』

少しのスクリプトと「webfont.js」を使って、非同期に複数のGoogle Fontsを読み込む方法 &#8211; 『front-end』

少しのスクリプトと「webfont.js」を使って、非同期に複数のGoogle Fontsを読み込む方法 – 『front-end』