JSでWebフォントのロード開始や完了などを判定するWeb Font Loader

最近ではWebフォントは個人ブログなどでも当たり前のように使われるようになってきました。しかし、1つ気になることがあります。それは、アクセスした0.5秒後くらいまではデフォルトフォントが表示されて、その後Webフォントが表示されるので、ちらついて見えることです。Webフォントがレンダリングされるまではロード表示などをしておくなどするためには、ロード完了を検知する必要があります。そんなときに便利なライブラリがあったので紹介します。

使い方

@font-face 
{
  font-family: 'mplus1p-thin';
  font-style: normal;
  font-weight: 100;
  src: url('mplus1p-thin.eot');  /* IE9+ */
  src: url('mplus1p-thin.eot?#iefix') format('embedded-opentype'),  /* IE8- */
       url('mplus1p-thin.woff') format('woff'),     /* その他のブラウザ */
       url('mplus1p-thin.ttf') format('truetype');  /* 古いiOS */
}
@font-face 
{
  font-family: 'noto';
  font-style: normal;
  font-weight: 400;
  src: url('noto.eot');  /* IE9+ */
  src: url('noto.eot?#iefix') format('embedded-opentype'),  /* IE8- */
       url('noto.woff') format('woff'),     /* その他のブラウザ */
       url('noto.ttf') format('truetype');  /* 古いiOS */
}

判定したいフォントを @font-face で記述しておきます。

ライブラリをダウンロード

https://github.com/typekit/webfontloader

Githubからダウンロードするか、以下のようにCDNを利用します。

https://developers.google.com/speed/libraries/#web-font-loader

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

判定

WebFont.load(
{
  custom:
  {
    families: ['mplus1p-thin', 'noto']
  },
  loading: function()
  {
    console.log('全てのWebフォントのロードが開始されたとき');
  },
  active: function()
  {
    console.log('全てのWebフォントのロードが完了したとき');
  },
  inactive: function()
  {
    console.log('全てのWebフォントのロードが失敗したとき');
  }
});

families に判定したいWebフォント名を記述します。判定したいWebフォントが複数ある場合はカンマ区切りで指定します。active は2つ以上のWebフォントを判定するとき、どれか1つが使用不可能でもイベントが発火されます。inactive はどれか1つでもWebフォントが使用可能ならば発火されないイベントです。

特定のフォントのみ

WebFont.load(
{
  custom:
  {
    families: ['mplus1p-thin', 'noto']
  },
  loading: function()
  {
    console.log('全てのWebフォントのロードが開始されたとき');
  },
  active: function()
  {
    console.log('全てのWebフォントのロードが完了したとき');
  },
  inactive: function()
  {
    console.log('全てのWebフォントのロードが失敗したとき');
  },
  fontloading: function(font_family, font_variation_description)
  {
    if (font_family === 'mplus1p-thin')
    {
      console.log('mplus1p-thinのロードが開始されたとき');
    }
    else if (font_family === 'noto')
    {
      console.log('notoのロードが開始されたとき');
    }
  },
  fontactive: function(font_family, font_variation_description)
  {
    if (font_family === 'mplus1p-thin')
    {
      console.log('mplus1p-thinのロードが完了した(使用可能)とき');
    }
    else if (font_family === 'noto')
    {
      console.log('notoのロードが完了した(使用可能)とき');
    }
  },
  fontinactive: function(font_family, font_variation_description)
  {
    if (font_family === 'mplus1p-thin')
    {
      console.log('mplus1p-thinのロードが失敗した(使用不可能)とき');
    }
    else if (font_family === 'noto')
    {
      console.log('notoのロードが失敗した(使用不可能)とき');
    }
  }
});

特定のフォントごとのイベントを監視したい場合はこのように書くことができます。

自動付与クラスを削除

WebFont.load(
{
  classes: false,
  custom: 
  {
   ...
});

デフォルトだと、html タグに自動的にクラス名がついてしまいます。classes を false にすればクラスがつかなくなります。