日本語WEBフォントのちらつき対策
先日4月10日はフォントの日だったらしくCC道場で「フォントの日だよ〜文字っ子！全員集合〜」というのをやっていた。
動画ではAdobe Fontsの日本語フォントが紹介されていたが、表示が遅くなったりちらつくので日本語のWEBフォントは手放しで使える感じではない。
世間ではFOIT（表示が遅い）とかFOUT（ちらつく）とかいうらしいくFOUTを解決するためにいったん隠してWEBフォントのロードが完了したら表示するようにしたり、 何らかの事情でWEBフォントが異常に遅かったり返ってこない場合用にタイマーを仕掛けたりするらしく、隠したりするのってSEO的にとかアクセシビリティ的に微妙な気がする。
そこで、昔作った「もしや」に日本語webフォントを導入し、ちらつかないように隠すのをやってみた。
Adobe FontsのフォントイベントによるとAdobe Fontsの日本語webフォントは読み込みが完了するとhtmlタグに「wf-active」というクラスを付けるだけで無くJavaScriptのイベントも用意されていた。
まず隠してる要素を排除した状態のCSSクラスを追加する関数を作る。
var opensesame = function() {
document.querySelector('body').classList.add("opensesame");
};次に、元々提供されたスクリプトにconfigというのがありコレにactiveイベントのアクションにさっき作った関数（opensesame）を指定し、更に元々あるタイムアウトの際に追加する” wf-inactive”に” wf-inactive opensesame”に書き換えると、アクティブになったときと時間切れの場合に「opensesame」というクラスが追加されるようになった。
(function(d) {
var config = {
kitId: '＜それぞれ＞',
scriptTimeout: 3000,
async: true,
active: opensesame
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document); 「もしや」は元々 襖の画像を 背景画像で固定していたデザインだったので、襖の画像をCSSで描き直して、時間が来たら開くようにした。つまり、この襖がFOUTのちらつき隠しになっている。
（ただ、スクリプトを切ると隠れたままなのでお勧めはしませんが・・・）
使ってるフォントは貂明朝の本文バージョンの「貂明朝テキスト」と約物を半角にしてくれる「Yaku Han JP」です。
なお、今回の実験のついでにレスポンシブ化して、扉開けたときに殿様にバウンドアクションさせたいが為にイラストを再度書き起こしたりと無駄な事を色々して丸2日を費やしている。