モノコセル

「こせる」とは千葉の方言で「作る」の意味。
今を越せる残せるモノをこせる。

Web Font Loader で Web フォントの読み込み速度を改善してみた

2019-11-16

1 分で読めます

Web フォントを非同期で読み込んで、Web フォントのダウンロード中に固まらないようにしてみた。

https://github.com/typekit/webfontloader

JavaScript を非同期でロード

2019-11-16 時点で最新版は 1.6.28 だが、Google Hosted Libraries では 1.6.26

<head>
    <!-- いろいろ -->
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" async></script>
    <!-- いろいろ -->
</head>

読み込みたい Web フォントの指定、および読み込み済みかどうかの確認

sessionStorage.fonts = true; でフラグ立てて、フラグ立ってたら wf-active をつけて回る。

WebFontConfig = {
  google: { families: ['Ubuntu:400,700', 'Source+Sans+Pro:400,700', 'Noto+Sans+JP:400,700'] },
  active: function () {
    // フォント読み終わったというフラグを立てる
    sessionStorage.fonts = true;
  }
};

(function (d) {
  if (sessionStorage.fonts) {
    // フラグが立ってたら、即座に wf-active をタグにつけて回る
    d.documentElement.classList.add('wf-active');
  }
})(document);

Web フォント読み込み前のフォント指定、読み込み後のフォント適用するための CSS

body {
  font-family: 'Hiragino Maru Gothic ProN', 'Meiryo',"Noto Sans CJK JP", sans-serif;
}

.wf-active body {
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Source Sans Pro", "Ubuntu", sans-serif;
}