メモログ

⛰ 塵が積もって山とならないメモのログ 👄

TypeSquareを試してみる

TypeSquareで0円キャンペーンをやっていて、登録だけでフォントを試すことができるので、試してみています。現在、本文には「UD新ゴ」があたっています(すぐ変えるかもしれませんけど)。なかなかいい感じ。他にも良い感じのフォントがたくさんあって悩みます。

個人的にはフォント一覧の「イメージワードから探す」というのが良くて、明朝とゴシックを組み合わせて使うときに、全体のイメージを合わせる参考になりました。最終的にはUD書体で合わせる感じにしましたけど。

内部仕組み的には、ざっと確認した限りでは、指定のscriptを挿入すると、DOMがreadyになったらページ内のfont-familyの指定を確認して、必要なフォントを読み込むということをしているみたいです。フォントはTrue TypeWOFFで、IE8用になんか頑張っている。よくある質問のフォントの表示についてと、フォントについても参照。

issue的には、インデックスページのように、masonryでブロックの大きさを計算して絶対配置していると、フォント読み込み後に少しずれてしまう、というのがありました。いわゆるFOUFT(Flash of Un-Fonted Text)というあれで、Web Fontが読み込まれる前にデフォルトのフォントが読み込まれると、読み込んだ前後でレイアウトの高さが少し変わる(font-size-adjustがいずれ解決するかも)。

As of early 2013, there is a cousin to this problem, which is the Flash of Un-Fonted Text, or FOUFT. This happens when a browser has loaded the page and the CSS and displays the laid-out page before its done loading custom fonts. This causes text to appear in the default font, or a fallback font, before being replaced by text using the custom-loaded font. Eric A. Meyer: CSS Fonts

Masonry Appendixをみた感じでは、TypeKitではTypekit.loadで、フォントを読み込みした後にmasonryの再レイアウトを実行できるみたい。TypeSquareでは、コードをざっと見た感じでは、読み込み後にコールバックする仕組みはなさそう。

とりあえずの回避策として、typesquare_cssというIDでheadにStyleSheetをappendするのはわかるので、document.getElementById(‘typesquare_css’)がtruthyになったら、masonryの再レイアウトを実施するようにしてみました。しかし、やはりコールバックの仕組みほしいですね(実はあるのかな)。

料金的には、料金プランによると一番安いのが年額16,800円。月額にすると1400円(入会時にはプラス入会金)。個人で使うには少し高いですね。500,000PV/1yearくらいでウルトラライトプランとかでないかしら(個人は入会金無料で…)。でも良いですね。できれば使い続けたい。

というメモ(そろそろスタイルシートを整理しないとなあ)。

WebViewではフォントが反映されないみたい。見た感じでは、XMLHttpRequestでのfontの読み込みが実行されない雰囲気(typesqure_cssもappendされてこない)。

userAgentに[‘MSIE’, ‘Firefox’, ‘Chrome’, ‘Safari’]のいずれかが含まれていないと、スクリプト内の_.b.nに値が入ってこないので、init()するときにif(!x()) return;のところで処理が終わるからみたい。WebViewでは’Chrome’や’Safari’の文字列がないので。また、IE11においても、userAgentにMSIEの文字列がないのでfontが読み込まれない。

2013/9/26にプランが新しくなって、入会金がなくなって無料プランができました。以前のプランはこんな感じでした。

有料の月額料金は2100円と上がったけれど、10000pv/monthまでは無料で使える。1日にすると333pv/dayなので充分とは言えないけど、使い切ってもフォントが読み込まれなくなるだけなので、個人サイトとしては良いかなと思う。そして有料でセルフホスティングプランも選べるようになった。