TypeSquare とは？
モリサワが提供しているWebフォントのクラウドサービス。
MORISAWA PASSPORTのライセンスとかもってても使える。
仕組み
Script要素を挿入しておくと、ページを読み込んだときにページ内に含まれる文字だけフォントをロードしてくる仕組み。
問題
必要な文字だけ読み込んでくれる仕組みがゆえに、
ページ読み込みよりも後に表示文字を含むHTMLを生成すると、その文字にWebフォントが適応されない。
(すでに読みこんでいる文字については適応されるので、場合よってはまばらな適応具合になる)
解決方法
TypeSquare API を利用すればできる。
Script要素のURI変える
<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>
JavaScript API でロードさせる。
そうするとグローバルスコープに 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>
参考
他にも読み込みを監視したりいろいろできるようです。