TypeSquare JavaScript API v3 リファレンス

※本APIの利用規約はTypeSquareの利用規約に準じます。

1. URLタグオプション

概要

URLタグオプションは配信利用タグの typesquare.js にパラメータを追加することで、ロード時の動作を変更できるオプションです。

フェードイン設定

機能

Webフォントを適用する際、フォントを徐々に表示する時間を設定できます。

※ デフォルトフォントを表示する場合は-1（マイナス1）を指定します

サンプル

※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。

フェードインあり: 利用タグ：引数に「fadein=1500」（1500ミリ秒でフェードイン）を指定

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=1500" charset="utf-8"></script>

フェードインなし: 利用タグ：引数に「fadein=-1」（マイナス1）を指定

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=-1" charset="utf-8"></script>

フォント自動読込設定

機能

画面上のテキスト変更を検知してフォントを自動で読込みます。

※ 過剰な読込を防ぐため、連続で変更を検知した場合には1秒間のインターバルが発生します。

※ フォント読込ごとに PV 消費が行われるため、ご利用の際は配信可能 PV 数の超過にご注意ください。

サンプル

※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。

読込あり: 利用タグ：引数に「auto_load_font=true」を指定

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&auto_load_font=true" charset="utf-8"></script>

ロード時動作設定

機能

画面ロード時にフォント読込を停止することができます。

※ 停止後のフォント配信には別機能との組み合わせが必要となります。

サンプル

※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。

読込なし: 利用タグ：引数に「onload=false」を指定

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>

非表示要素フォント読込設定

機能

hidden属性の文字列に対してフォントを配信することができます。

サンプル

※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。

読込あり: 利用タグ：引数に「apply_to_hidden=true」を指定

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_hidden=true" charset="utf-8"></script>

疑似要素フォント読込設定

機能

「after」や「before」などの擬似要素で指定した文字に対してフォント配信を抑制することができます。

サンプル

※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。

読込なし: 利用タグ：引数に「apply_to_pseudo=false」を指定

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_pseudo=false" charset="utf-8"></script>

2. API Method

フォント取得

メソッド
Ts.loadFontAsync(FontObj)
機能
パラメータで指定したテキストのWebフォントを取得します。
引数
FontObj : フォントオブジェクト
備考
フォントオブジェクトとして指定できるパラメーター
パラメーター 必須 説明
cssName 必須 CSS指定名
text 必須 テキスト
callback 必須 コールバック: 関数
fontFamily - 任意のfont-family 名: cssName 設定値
outputType - 出力形式 (css/json): css
callbackId - コールバックID: タイムスタンプ
フォント読込ごとに PV 消費が行われるため、ご利用の際は配信可能 PV 数の超過にご注意ください。

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Folk Bold';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const fontasync = function() {
        const callbackId = Date.now();
        Ts.loadFontAsync({
          'cssName': 'Folk Bold',
          'text': document.getElementById("target").innerText,
          'hasHint': false,
          'outputType': 'json',
          'callbackId': callbackId,
          'callback': callbackJson
        });
      }
      const callbackJson = function(params) {
        const styleElement = document.createElement('style');
        styleElement.setAttribute('type', 'text/css');
        styleElement.setAttribute('rel', 'stylesheet');
        const data = JSON.parse(params.data);
        const data_object = JSON.parse(data.res);
        styleElement.innerHTML = "@font-face {font-family: '" + data_object['fontFamily'] + "'; font-weight: " + data_object['font-weight'] + ";src: url(data:font/woff;base64," + data_object['src'] +");}";
        document.head.appendChild(styleElement);
      }
    </script>
  </head>
  <body>
    <div>
      <input class="btn" type="button" onclick="fontasync();" value="API Method の フォント取得機能を利用してフォントをロード" />
      <input class="btn" type="button" onclick="document.location.reload();" value="このサンプルを再読み込みする" />
      <p id="target" class="t1">TypeSquareはあなたのウェブサイトデザインを一新します。</p>
    </div>
  </body>
</html>

フォント読込

メソッド
Ts.loadFont()
機能
ページ全体のテキストに対してフォントを再読込します。
備考
フォント読込ごとに PV 消費が行われるため、ご利用の際は配信可能 PV 数の超過にご注意ください。

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Reimin Bold';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="API Method の フォント読込機能を利用してフォントをロード" />
    <input class="btn" type="button" onclick="document.location.reload();" value="このサンプルを再読み込みする" />
    <p class="t1">TypeSquareはあなたのウェブサイトデザインを一新します。</p>
  </body>
</html>

フォント適用範囲指定

メソッド
Ts.setQuerySelector(selector)
機能
フォントを適用するセレクタを指定します。
引数
selector : セレクター

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        margin: 15px;
        font-size: 25px;
      }
      .font01 {
        font-family: "Shin Go Emboss";
      }
      .font02 {
        font-family: "Shin Go Shadow";
      }
    </style>
    <script type="text/javascript">
      Ts.setQuerySelector(".target");
    </script>
  </head>
  <body>
    <p class="target font01">TypeSquareはあなたのウェブサイトデザインを一新します。</p>
    <p class="font02">TypeSquareはあなたのウェブサイトデザインを一新します。</p>
  </body>
</html>

フォント自動読込範囲指定

メソッド
Ts.setAutoLoadFontSelector(selector, sleep)
機能
指定したセレクタを監視し、内部の文字列が変更された際自動でフォントを読込みます。再読込待ち時間で指定した時間内に複数回の文字列変更が行われた場合、次回の実行は再読込待ち時間で指定した時間以降に処理されます。
引数
selector : セレクタ
sleep : 再読込待ち時間（ミリ秒）
備考
フォント読込ごとに PV 消費が行われるため、ご利用の際は配信可能 PV 数の超過にご注意ください。

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?ABLvfE0Yeyc%3D" charset="utf-8"></script>
    <style type="text/css">
      body {
        font-family: "Shuei MaruGo B";
        margin: 15px;
        line-height: 1;
      }
      .t1 {
        font-size: 18px;
      }
      .t2 {
        font-size: 26px;
        line-height: 1;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        $("#word").keyup(function() {
          $("#target").text($(this).val());
        });
      });
      function autoLoadStart() {
        Ts.setAutoLoadFontSelector("#target", 1000);
      }
    </script>
  </head>
  <body onload="autoLoadStart();">
    <input class="btn" type="button" onclick="document.location.reload();" value="このサンプルを再読み込みする" />
    <p class="t1">Webフォントを使って好きな文章を試すことができます</p>
    <input type="text" maxlength="18" style="width:40%;" placeholder="適用する言葉を入力してください。" id="word">
    <p class="t2" id="target"></p>
  </body>
</html>

3. API Event

フォント適用前

メソッド
Ts.onFontDownloaded(function)
機能
1書体毎にWebフォント取得前の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。イベント時に呼び出す関数を登録します。
引数
function : 関数

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Kakumin Medium';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const sample = function (params) {
        const css = document.getElementById("target");
        if (params.fonts[0].status == false) {
          css.style.color = "#22559C";
          alert('フォント適用対象の確定を検知してフォントカラーを変更します。');
        }
      }
      Ts.onFontDownloaded(sample);
    </script>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="フォントをロード" />
    <input class="btn" type="button" onclick="document.location.reload();" value="このサンプルを再読み込みする" />
    <p id="target" class="t1">TypeSquareはあなたのウェブサイトデザインを一新します。</p>
  </body>
</html>

Webフォントのダウンロードが完了したら適用前にコールバックします。

フォント適用後

メソッド
Ts.onFontRendered(function)
機能
1書体毎にWebフォント適用後の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。イベント時に呼び出す関数を登録します。
引数
function : 関数

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Kakumin Medium';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const sample = function (params) {
        const css = document.getElementById("target");
        if (params.fonts[0].status == true) {
          css.style.color = "#F27370";
          alert('フォント適用の確定を検知してフォントカラーを変更します。');
        }
      }
      Ts.onFontRendered(sample);
    </script>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="フォントをロード" />
    <input class="btn" type="button" onclick="document.location.reload();" value="このサンプルを再読み込みする" />
    <p id="target" class="t1">TypeSquareはあなたのウェブサイトデザインを一新します。</p>
  </body>
</html>

Webフォントのダウンロードが完了したら適用後にコールバックします。

全フォント適用後

メソッド
Ts.onFontLoaded(function)
機能
全てのWebフォント適用後の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。イベント時に呼び出す関数を登録します。
引数
function : 関数

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
    <style type="text/css" rel="stylesheet">
      body {
        font-family: 'Kakumin Medium';
        margin: 15px;
      }
      .t1 {
        font-size: 34px;
        line-height: 1.5;
      }
    </style>
    <script type="text/javascript">
      const sample = function (params) {
        const css = document.getElementById("target");
        if (params.fonts[0].status == true) {
          css.style.color = "#FA9856";
          alert('フォント適用を検知してフォントカラーを変更します。');
        }
      }
      Ts.onFontLoaded(sample);
    </script>
  </head>
  <body>
    <input class="btn" type="button" onclick="Ts.loadFont();" value="フォントをロード" />
    <input class="btn" type="button" onclick="document.location.reload();" value="このサンプルを再読み込みする" />
    <p id="target" class="t1">TypeSquareはあなたのウェブサイトデザインを一新します。</p>
  </body>
</html>

Webフォントのダウンロードが完了したら適用後にコールバックします。