動的に追加した文字にWebフォント(TypeSquare)を設定する

Webフォントは、ページ読込時に配信(設定)されます。
これは、ページ読込時に存在している文字に対してのみWebフォントが配信されるいうことです。

ページ読込時に存在していない文字の場合、ページ読込後にJavaScript(jQueryなども含む)で動的に文字を追加してもWebフォントが適用されません。
つまり、Webフォント配信済みの文字と未配信の文字が混在するということです。

対処法は2つあります。

1.文字列追加後にWebフォントをリロードする

TypeSquareの場合、動的に文字列を追加する処理の後に以下のコードを書けばOKです。

Ts.reload();

こちら、バージョンによっては「フォント自動読込み」機能もあるみたいです。
TypeSquare JavaScript API v3 リファレンス
TypeSquare JavaScript API v2 リファレンス

他のWebフォントにも同様のメソッドがあるようです。(使っていないので未確認)
【jQuery】追加した文字列にWebフォントを適用する

2.ページ読込時に動的に追加する文字列を非表示で読み込ませておく

こちらは動的に追加する文字列が決まっている場合しか使えませんが、リロードしない分PVの消費を抑えることができます。

タイトルとURLをコピーしました