Webフォントが読み込まれてからJSを実行させたい時に便利な「Web Font Loader」

, ,

たとえば、ウェブサイト制作時にローディングをテキストベースで作成しているときなど、Webフォントが読み込まれた状態で表示しないと、途中で文字がカクついてしまうことがあります。
他にも、サイトにアクセスしてから数秒はデフォルトで文字が表示されてしまうので、ウェブフォントが読み込まれてから全体を表示するようにしたい、などJavascriptを使って制御をしたいことがあるかもしれません。
そんな時に便利なのが、「Web Font Loader」です。

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

具体的なやり方

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

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

ヘッダーで読み込んでください。
githabからDLする場合：https://github.com/typekit/webfontloader

▼HTML側

1
<div class="c-loading_txt"> Hello world</div>

▼CSS側

1
2
3
4
.c-loading_txt {
  font-family: "Gilda Display", serif;
  opacity: 0;
}

▼ Js側
私の場合、jqueryで色々制御していたので、$(function()内に記載しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
 
WebFont.load(
  {
    custom:
    {
      families: ['Gilda Display'] //判定したいウェブフォント名を記載。複数ある場合はカンマ区切り。
    },
    loading: function()
    {
      //console.log('全てのWebフォントのロードが開始されたとき');
    },
    active: function()
    {
      //console.log('全てのWebフォントのロードが完了したとき');
      $('.c-loading_txt').css('opacity', '1');
    },
    inactive: function()
    {
      //console.log('全てのWebフォントのロードが失敗したとき');
  }
});
 
});   //$(function(){

これで、.c-loading_txtの「Hello world」にGilda Displayというフォントが適用され次第、opacityを1にすることで画面上に表示される、ということが実現できました。

このように「全てのWebフォントのロードが完了」したという検知を入れてから処理させることで、ウェブフォントのカクつきを制御することが可能です。
もっと具体的に「特定のフォントごとのイベントを監視」などしたい場合は、参考サイトに詳しく載っていたので参照してみると良いかもしれません。