【jQuery】追加した文字列にWebフォントを適用する

• Web Create
• 2017.06.09

JSで追加した文字列にはWebフォントが効かない

JSONから呼出したテキストを表示させたら、フォントがおかしくなってしまいました。
ページ読み込み時に存在している文字列だけ、フォントを取得する仕組みのためです。

解決するためにはWebフォントサービスが提供しているAPIを利用します。
今回はFONTPLUSを利用していたので下記のようにしました。

サンプル

$.ajax({
  url: 'sample.json',
})
.done(function (data) {
  // JSON整形処理

  FONTPLUS.reload(); //フォントの再読込み
});

TypeSquareの場合は7行目を Ts.reload(); で出来るようです。
Typekitは未確認ですが Typekit.load(); で出来そうです。