動的にHTMLが変更されるコンテンツにTypeSquareを反映したい

  • 8
    いいね
  • 0
    コメント

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>

参考

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