少しのスクリプトと「webfont.js」を使って、非同期に複数のGoogle Fontsを読み込む方法 – 『front-end』
- uto usui
- //
- asynchronous
- font
- frontend
- javascript
- speed
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フォントはいけてるフォントが多数存在しているので、好みのを見つけたり選定するのに苦労しますが、先人たちが目方をつけてくれています。
参考にすると目的のものに簡単にたどり着くことができますので、感謝です。合掌。
- 超厳選!Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】 – F Lab.
- おすすめのGoogle Web Fonts 25選 | それからデザイン スタッフブログ
- ウェブページを一瞬でオシャレにするオススメのGoogle Web Fontsを厳選してみた – Literally
おわります。