AdobeのTypekitって使ってますか？

Adobeが提供しているフォントのライブラリなんですけど、日本語も結構対応していてWebフォントとしても利用できるので結構使えるんですよ。有料だけどCreative Cloudのプランに含まれているので、既に契約している人は追加料金とかなしで使えるんですけど、意外と知らない人が多いみたいですよねー。

ま、詳しい使い方とかはこの辺のページに書いてるんで気になる人は読んでねーってことで。で、そんな便利なAdobe Typekitなんですけど、Webフォントのどうしても気になる部分っていうのは、読み込みが遅い件ですね。一応サブセット化されてるらしいんで最短で読み込まれているはずなんですが、それでも読み込みが遅くなって一瞬チラついてしまうのは気になるところであります。

というわけで、そのあたりを解決するためにフォントの読み込み完了のタイミングを知ることってできないのかなーと試行錯誤してみたら予想以上に泥沼に嵌っていったのでその報告ととりあえず現時点での解決策をお知らせします。

公式で用意されてるフォントイベントでやってみる。

Google Web Fonts APIだとWebFont Loaderというライブラリが組み込まれていてこの辺りの問題は解決するんですね。

で、どうやらAdobe Typekitにも同じものが用意されているらしい。公式がそう言っているんだから当然まずはここから試してますよね、普通。こんな感じのソースを書いてみます。

<script src="https://use.typekit.net/xxxxxx.js"></script>
<script>
try{
  Typekit.load({
    loading: function() {
      console.info("loading");
    },
    active: function() {
      console.info("active");
    },
    inactive: function() {
      console.info("inactive");
    }
  });
}catch(e){
}
</script>

はい。公式に書いてある通りの内容ですね。これで動かなかったらおかしいですね。しかしながら、これだとおそらくどのイベントも発生しないと思われます(2016年5月現在)。なぜでしょう？ 不明です。色々試してみても何が原因なのかさっぱりわかりません。わからないままで僕の場合は一晩過ぎました。で、翌日ちょっと切り替えてみた頭で再び調べてみたら見つけました。この答えはこのページにあります→https://forums.adobe.com/thread/2143197

つまり、現状日本語フォントでコールバックは使えない、対応は検討中、とのこと。困った話です。何が困るって、その日本語には対応していないっていう情報がフォーラムにしか書かれてないっていうところですよね。対応していないなら最初からはっきりとそう書いておいてほしいところです。ここに躓いていた時間を返してくれるのかね、君たちは？

さて。ということでアドビさんが対応してくれるのを待ちましょう、待てないんだったら日本語Webフォントなんか使うなっていう結論でもいいんですが、それだとなんか悔しいので別の方法を検討していきます。

CSS Font Loading Moduleとやらを使ってみる。

いろいろ調べているうちに見つけた情報。CSS Font Loading Moduleなるものが策定中らしい。この記事がわかりやすそうだったので、これを参考にして書いてみます。

<style>
body {
font-family: 'kozuka-mincho-pro';
}
</style>
<script src="https://use.typekit.net/xxxxxx.js"></script>
<script>
try{
  Typekit.load({
    async: true
  });
}catch(e){
}
document.fonts.addEventListener('loadingdone', function() {
  console.info("loadingdone");
});
</script>

結論から言うと、これはうまく動きました。ただし、Chrome, Firefoxではの話です。IE11では無反応、Safariは未確認。まぁそもそも策定中の仕様なので、使ってみるにはまだ早いかなーという感じです。IE切り捨てても問題ないケースの時だけ使いましょう。

さて。となると他には何か方法がないだろうかと考えつつ、再び公式のドキュメントに戻って読み返してみたところ、僕はあることに気がついたのであります。

htmlのclassを監視してみる。

公式には「これらのフォントイベントには CSS と Javascript の両方からアクセスできます。」と書いています。どういうことかというと、僕はJSで制御したかったのでコールバック関数にばかりこだわっていましたが、もしCSSだけで制御できる場合はそれ用の方法も用意されているという話でして、それはどんなもんかといいますと、フォントの読み込み状態に対応してhtmlタグにそれぞれ.wf-loading、.wf-active、.wf-inactiveというクラスを付与しますよーという仕組みです。そしてこれに関しては、どうやら日本語フォントでも問題なく動作しているようで、Chromeの開発ツールで観察してみてもちゃんとクラスが変化しているのを確認できます。

と、いうことは？ つまりhtmlタグを監視すれば、クラスの変化によってフォントを読み込むタイミングがわかるということなのでは？

ということで、MutationObserverを使って監視してみます。こんな感じのコードでうまくできるんじゃないだろうか？

<script src="https://use.typekit.net/xxxxxx.js"></script>
<script>
if (typeof MutationObserver !== 'undefined') {
  var $html = $("#html"); //htmlタグにはid="html"としている想定。
  var observer = new MutationObserver(function(data1, data2) {
    if($html.hasClass("wf-loading")){
      console.info("loading");
    }else if($html.hasClass("wf-active")){
      console.info("active");
      observer.disconnect();
    }else if($html.hasClass("wf-inactive")){
      console.info("inactive");
      observer.disconnect();
    }
  });
  var options = {attributes: true, attributeFilter: ["class"]};
  observer.observe($html[0], options);
}else {
  alert("そろそろブラウザ変えたら？");
}
</script>

※MutationObserverはIEだと11からしか対応していないので、それ以前も対応しなければいけないケースはsetIntervalとか使って原始的に監視してあげる感じにすればいいんじゃないでしょうか。

で、これで実行してみた結果は…やったー！！やっっっ…た！！やったよーー！！（「はじめてのチュウ」風に）

実際にテキストをdisplay: noneで入れておいて、activeになったら表示みたいな感じにしてみてもちゃんと読み込まれてから表示されているのがわかります。と、いうわけでこれを代替手段として使えそうな気がしますね。

ま、なんかアドビさんがあっさり機能として実装してしまうっていう展開がありそうですが。それまでの間、もし困っている方がいれば参考にしていただければと思います。