TypeSquare とは？

モリサワが提供しているWebフォントのクラウドサービス。
MORISAWA PASSPORTのライセンスとかもってても使える。

仕組み

Script要素を挿入しておくと、ページを読み込んだときにページ内に含まれる文字だけフォントをロードしてくる仕組み。

必要な文字だけ読み込んでくれる仕組みがゆえに、
ページ読み込みよりも後に表示文字を含むHTMLを生成すると、その文字にWebフォントが適応されない。
(すでに読みこんでいる文字については適応されるので、場合よってはまばらな適応具合になる)

TypeSquare API を利用すればできる。

<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?{ID}" charset="utf-8"></script>

↓ apiscript にする。

<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?{ID}" charset="utf-8"></script>

そうするとグローバルスコープに Ts オブジェクトが定義されるので、用意されたインターフェイスでTypeSquareに関する操作が可能になる。
たとえば、HTMLを append したあとなど、任意のタイミングでロードさせるには下記のメソッドを呼び出す。

Ts.reload();

そのまま変えるだけだとロード時点で適応されなくなるので、自動で適応したければ下記のように loadstart=1 とする。

<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?{ID}&loadstart=1" charset="utf-8"></script>

他にも読み込みを監視したりいろいろできるようです。