TypeSquareのWebフォントを使うには、専用タグの設定とCSSの指定だけで十分ですが、JavaScript APIを活用することで、サイトが見やすくなったり、より幅広い表現が可能となったりします。
TypeSquare公式サイトで公開している「TypeSquare JavaScript API v3 リファレンス」のページから、いくつかピックアップして使い方をご紹介いたします。
テキストを徐々に表示させる
Webサイトを閲覧する時、通信環境によってはWebフォントの適用にタイムラグが生まれ、テキストがデフォルトのフォントで表示されてから一瞬遅れてWebフォントに切り替わる場合があります。
この、フォント切り替わり時のちらつきを無くすために有効なのがフェードイン設定です。
テキストが表示されていない状態から徐々にテキストが表示されるため、違和感なくWebフォントを表示できるようになります。
フェードイン設定
また、このフェードイン設定は、TypeSquareマイページの「プラン・オプション設定」からも設定することができます。
「プラン内容」の「フェードイン設定」で［フェードインあり］を選択し、フェードインまでの秒数を指定することができます。
範囲を指定してWebフォントを適用する
Webフォントを適用する範囲を、セレクタ単位で指定することができます。一部分だけ任意のWebフォントを指定したい場合にお使いいただけます。
フォント適用範囲指定
Webフォントを使った「試し書き」を実装する
入力した文字を指定のフォントで表示するといった、いわゆる「試し書き」のような機能も 、JavaScript APIを使えば可能となります。
指定した箇所を監視し、文字列が変更された時に、自動で任意のWebフォントを読み込みますので、入力フォームなどと組み合わせ、「試し書き」としてデザイン・印刷会社の書体見本として活用いただけます。
フォント自動読込範囲指定
サンプル書体：秀英丸ゴ B
いかがでしたでしょうか？
「TypeSquare JavaScript API v3 リファレンス」のページでは、他にも便利なAPIを公開していますので、ぜひWebサイト制作にご活用ください！
