TypeSquare API リファレンス

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

1. URLタグオプション

概要

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

フェードイン

機能

Webフォントが適用される前に、サイト内のテキストがブラウザのデフォルトフォントで表示されていると、適用時に画面がちらついて見えてしまうことがあります。このちらつきを抑えるためのフェードイン機能がご利用いただけます。

サンプル

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

フェードインなし: 引数指定なし

<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?q76O1i4KMzo%3D" charset="utf-8"></script>

フェードインあり: 利用タグ:引数に「fadein=10」(1000ミリ秒でフェードイン)を指定

<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?q76O1i4KMzo%3D&fadein=10" charset="utf-8"></script>

ロード時動作指定

機能

画面ロード時ではなく任意のタイミングでフォントをロードする場合、このオプションを利用して初期のフォントロードを止めて下さい。 非同期に動作するアプリケーションなどで、初期ページロード時にフォントを読み込む必要がない場合などにご利用いただくと便利です。

※ リロード機能を利用することで、任意のタイミングでフォントの配信をおこなうことができます。

※ 本機能を利用するには、配信タグの「/accessor/script」を「/accessor/apiscript」に変更して下さい。

サンプル

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

<!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D&loadstart=0" charset="utf-8"></script>
  <style type="text/css" rel="stylesheet">
  #nonload_text {
      font-family: 'Kaimin Tsuki Bold';
  }
  </style>
  </head>
  <body>
      <span id="nonload_text">最初はフォントがロードされません。</span>
      <button type="button" onclick="Ts.reload();">フォントをロード</button>
  </body>
  </html>

2. TypeSquare Web API

概要

TypeSquare Web APIは、配信利用タグに記載された配信IDを使ってAPIキーを発行し、そのキーを使って登録URLの操作やPV、書体リストなどの情報を取得することができます。

認証

機能
TypeSquare Web APIのAPIキー発行
URL
https://typesquare.com/api/auth
引数(POST)
id (必須) : 配信ID (typesquare.jsの引数)
password (必須) : パスワード
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
api_key : APIキー
エラーコード
0000:POSTデータ取得失敗
1101:API利用認証失敗
1102:API利用登録失敗
備考
認証後、APIに接続しないまま24時間が経過すると、セッションが切れます。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <form action="https://typesquare.com/api/auth/" method="post">
        <p>id: <input type="text" name="id"></p>
        <p>password: <input type="password" name="password"></p>
        <p><input type="submit" name="submit" value="send"></p>
    </form>
</body>
</html>

配信IDとパスワードを入力してsendをクリックしてください。

URL登録

機能
TypeSquareを利用するサイト(URL)の登録
URL
https://typesquare.com/api/service
引数(POST)
method : typesquare.regist.url
api_key : APIキー
url_text : 登録URL
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
res_err_code : エラーコード
エラーコード
0000:POSTデータ取得失敗
0001:利用API名間違い
0002:認証期限切れ
1301:Base64デコードに失敗
1302:同名URLが登録されている
1303:契約情報取得失敗
1304:URL数上限に達している
1305:URLの登録に失敗
1306:配信認証登録に失敗
1307:許可されない文字が含まれる
9998:メンテナンス中。しばらくたってから再実行して下さい。
備考
登録するURLはBASE64エンコードしてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="base64v1_0.js"></script>
<script type="text/javascript">
encode_url = function(name) {
    document.getElementsByName(name)[0].value = B64.encode(document.getElementsByName(name)[0].value);
}
</script>
</head>
<body>
    <form action="https://typesquare.com/api/service/" method="post">
        <p>method: <input type="text" name="method" value="typesquare.regist.url"></p>
        <p>api_key: <input type="text" name="api_key"></p>
        <p>登録url: <input type="text" name="url_text"><input type="button" value="base64 encode" onclick="encode_url('url_text');"></p>
        <p><input type="submit" name="submit" value="send"></p>
    </form>
</body>
</html>

※サンプルで使用している base64v1_0.js は Apache License 2.0 で下記のURLで公開されています。
https://github.com/infowrap/base64/

api_keyと登録urlを入力してください。base64 encode をクリックして登録urlを変換してから send をクリックしてください。

URL解除

機能
TypeSquareを利用するサイト(URL)の解除
URL
https://typesquare.com/api/service
引数(POST)
method : typesquare.delete.url
api_key : APIキー
url_text : 解除URL
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
res_err_code : エラーコード
エラーコード
0000:POSTデータ取得失敗
0001:利用API名間違い
0002:認証期限切れ
1401:Base64エンコードに失敗
1402:URLが見つからない
1403:URL削除に失敗
1404:配信認証の削除に失敗
9998:メンテナンス中。しばらくたってから再実行して下さい。
備考
解除するURLはBASE64エンコードしてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="base64v1_0.js"></script>
<script type="text/javascript">
encode_url = function(name) {
    document.getElementsByName(name)[0].value = B64.encode(document.getElementsByName(name)[0].value);
}
</script>
</head>
<body>
    <form action="https://typesquare.com/api/service/" method="post">
        <p>method: <input type="text" name="method" value="typesquare.delete.url"></p>
        <p>api_key: <input type="text" name="api_key"></p>
        <p>削除url: <input type="text" name="url_text"><input type="button" value="base64 encode" onclick="encode_url('url_text');"></p>
        <p><input type="submit" name="submit" value="send"></p>
    </form>
</body>
</html>

※サンプルで使用している base64v1_0.js は Apache License 2.0 で下記のURLで公開されています。
https://github.com/infowrap/base64/

api_keyと削除urlを入力してください。base64 encode をクリックして削除urlを変換してから send をクリックしてください。

登録したURLの一覧取得

機能
登録したURLの取得
URL
https://typesquare.com/api/service
引数(POST)
method (必須) : typesquare.get.url
api_key (必須) : APIキー
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
dtls : 取得結果(下記結果サンプル参照)
res_err_code : エラーコード
エラーコード
0000:POSTデータ取得失敗
0001:利用API名間違い
0002:認証期限切れ
1201:登録URL取得失敗
備考
取得したURLはBASE64エンコードされています。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <form action="https://typesquare.com/api/service/" method="post">
        <p>method: <input type="text" name="method" value="typesquare.get.url"></p>
        <p>api_key: <input type="text" name="api_key"></p>
        <p><input type="submit" name="submit" value="send"></p>
    </form>
</body>
</html>

api_keyを入力してsend をクリックしてください。

指定した期間のサイト毎のPV取得

機能
指定した期間のサイト毎のPV取得
URL
https://typesquare.com/api/service
引数(POST)
method (必須) : typesquare.get.pv
api_key (必須) : APIキー
url_text (任意) : 登録URL
start_date (必須) : 開始日(YYYYMMDD)
end_date (必須) : 終了日(YYYYMMDD)
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
dtls : 取得結果(下記結果サンプル参照)
res_err_code : エラーコード
エラーコード
0000:POSTデータ取得失敗
0001:利用API名間違い
0002:認証期限切れ
1501:指定期間チェックに失敗
1502:Base64エンコードに失敗
備考
登録URLはBASE64エンコードしてください。
取得したURLはBASE64エンコードされています。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="base64v1_0.js"></script>
<script type="text/javascript">
encode_url = function(name) {
    document.getElementsByName(name)[0].value = B64.encode(document.getElementsByName(name)[0].value);
}
</script>
</head>
<body>
    <form action="https://typesquare.com/api/service/" method="post">
        <p>method: <input type="text" name="method" value="typesquare.get.pv"></p>
        <p>api_key: <input type="text" name="api_key"></p>
        <p>対象url: <input type="text" name="url_text"><input type="button" value="base64 encode" onclick="encode_url('url_text');"></p>
        <p>開始日: <input type="text" name="start_date" placeholder="YYYYMMDD"></p>
        <p>終了日: <input type="text" name="end_date" placeholder="YYYYMMDD"></p>
        <p><input type="submit" name="submit" value="send"></p>
    </form>
</body>
</html>

※サンプルで使用している base64v1_0.js は Apache License 2.0 で下記のURLで公開されています。
https://github.com/infowrap/base64/

api_key、対象urlおよび開始日・終了日を入力してください。base64 encode をクリックして対象urlを変換してから send をクリックしてください。

フォント一覧取得

機能
指定した条件のフォント一覧を取得
URL
https://typesquare.com/api/service
引数(POST)
method (必須) : typesquare.get.font
api_key (必須) : APIキー
fontname (任意) : 書体名 例)見出ミンMA1
familyname (任意) : ファミリー名 例)見出ミンMA1
fontmaker (任意) : メーカー名 例)モリサワ
familystyle (任意) : 書体分類 例)明朝体/ゴシック体
weight (任意) : 太さ 例)細/中/太/特太
language (任意) : 言語 例)日本語
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
dtls : 取得結果(下記結果サンプル参照)
res_err_code : エラーコード
エラーコード
0000:POSTデータ取得失敗
0001:利用API名間違い
0002:認証期限切れ
1701:Base64エンコードに失敗(書体名)
1702:Base64エンコードに失敗(ファミリー名)
1703:Base64エンコードに失敗(メーカー名)
1704:Base64エンコードに失敗(書体分類)
1705:Base64エンコードに失敗(太さ)
1706:Base64エンコードに失敗(言語)
1707:フォントが見つからない
備考
書体名から言語まではBASE64エンコードしてください。
条件は任意項目です。指定した場合は完全一致の条件で抽出します。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="base64v1_0.js"></script>
<script type="text/javascript">
encode_url = function(name) {
    document.getElementsByName(name)[0].value = B64.encode(document.getElementsByName(name)[0].value);
}
encode_all = function() {
    encode_url('fontname');
    encode_url('familyname');
    encode_url('fontmaker');
    encode_url('familystyle');
    encode_url('weight');
    encode_url('language');
}
</script>
</head>
<body>
    <form action="https://typesquare.com/api/service/" method="post">
        <p>method: <input type="text" name="method" value="typesquare.get.font"></p>
        <p>api_key: <input type="text" name="api_key"></p>
        <p>書体名: <input type="text" name="fontname"></p>
        <p>ファミリー名: <input type="text" name="familyname"></p>
        <p>メーカー名: <input type="text" name="fontmaker"></p>
        <p>書体分類: <input type="text" name="familystyle"></p>
        <p>太さ: <input type="text" name="weight"></p>
        <p>言語: <input type="text" name="language"></p>
        <p><input type="button" value="base64 encode" onclick="encode_all();"></p>
        <p><input type="submit" name="submit" value="send"></p>
    </form>
</body>
</html>

※サンプルで使用している base64v1_0.js は Apache License 2.0 で下記のURLで公開されています。
https://github.com/infowrap/base64/

api_key と任意の絞り込み項目を入力してください。base64 encode をクリックして入力内容を変換してから send をクリックしてください。

セルフホスティング用サブセットフォント作成

機能
セルフホスティングプランで利用するフォントを作成する
URL
https://typesquare.com/api/service
引数(POST)
method (必須) : typesquare.create.content
api_key (必須) : APIキー
save (任意) : 該当プランへコンテンツを保存(0:保存しない、1:保存する/指定なしの場合は0)
content (必須) : コンテンツZIPファイル
戻り値(XML)
zip : サブセットZIPファイル(OKの場合の戻り値)
res_result : 処理結果ステータス(NGの場合の戻り値)
res_errcode : エラーコード(NGの場合の戻り値)
エラーコード
0000:POSTデータ取得失敗
1801:ファイルサイズ異常
1802:API認証失敗
1803:契約情報認証失敗
1804:解析対象無しエラー
1805:フォント無しエラー(フォントファミリ指定なし)
1806:フォント無しエラー(フォントファミリ名不正(もしくは、非サポートフォントが指定されている))
1807:フォント登録数上限エラー
1808:1500字種超えエラー
1809:セルフコンテンツ作成失敗
1810:セルフコンテンツデータ登録失敗
1899:下記のいずれかのエラー
    ・zipファイルをアップロードしてください
    ・ファイルをアップロードしてください
    ・ファイルに利用できない文字が含まれています
備考
作成元コンテンツはサブセットZIPファイルには含まれません。
アップロードするzipファイルは10MB以下である必要があります。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
  <form action="https://typesquare.com/api/service" method="post">
    <p>method: <input type="text" name="method" value="typesquare.create.content"></p>
    <p>api_key: <input type="text" name="api_key"></p>
    <p>save: <input type="radio" name="save" value="0" checked>0(保存しない) <input type="radio" name="save" value="1">1(保存する)</p>
    <p>content: <input type="file" name="content"></p>
    <p><input type="submit" name="submit" value="send"></p>
  </form>
</body>
</html>

api_keyを入力し、「ファイルを選択」をクリックしてコンテンツzipファイルを選択してから「send」をクリックしてください。プランへコンテンツを保存する場合は「save」の「1(保存する)」を選択してください。

3. TypeSquare JavaScript API

概要

TypeSquare JavaScript APIはフォント配信の拡張機能です。Webフォントの適用が完了したイベントを取得して、JavaScript等で引き続き処理を記述できます。任意のタイミングでWebフォントを取得したり、Webフォントの適用をセレクタ単位で指定することが可能です。
拡張機能を利用するには、配信タグの「/accessor/script」を「/accessor/apiscript」に変更して下さい。

ダウンロードコールバック

メソッド
Ts.onComplete(callback)
機能
Webフォントの適用が完了したイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
引数
callback (必須) : コールバック関数
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
api_key : APIキー
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.font[n].name : フォント名
    res.font[n].status : ステータス: true/false

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet">
body {
    font-family: 'Maru Folk Heavy';
}
#callback {
    color: blue;
    visibility: hidden;
}
</style>
<script type="text/javascript">
callback = function(res) {
    var css = document.getElementById('callback');

    if (res.type == 'css') {
        css.textContent = res.data;
    }
    if (res.code == 0) {
        css.style.visibility = 'visible';
    }
}
Ts.onComplete(callback);
</script>
</head>
<body>
    <p>コールバックなし</p>
    <p id="callback">コールバックあり</p>
</body>
</html>

Webフォントのダウンロードが完了したらコールバックします。リロードして下さい。

ダウンロードコールバック(適用前)

メソッド
Ts.onPreComplete(callback)
機能
1書体毎にWebフォント取得前の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
引数
callback (必須) : コールバック関数
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
api_key : APIキー
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.font[0].name : フォント名
    res.font[0].status : ステータス: true/false

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet">
body {
  font-family: 'Maru Folk Heavy';
}
#callback {
  color: blue;
  visibility: hidden;
}
</style>
<script type="text/javascript">
callback = function(res) {
  var css = document.getElementById('callback');

  if (res.type == 'css') {
    css.textContent = res.data;
  }
  if (res.code == 0) {
    alert('フォントの適用前です');
    css.style.visibility = 'visible';
  }
}
Ts.onPreComplete(callback);
Ts.setLoadStart(0);
</script>
</head>
<body>
  <p>コールバックなし</p>
  <p id="callback">コールバックあり(適用前)</p>
  <button onclick="Ts.reload();">フォントをロード</button>
</body>
</html>

Webフォントのダウンロードが完了したら適用前にコールバックします。サンプルをリロードしてお試し下さい。

ダウンロードコールバック(適用後)

メソッド
Ts.onPostComplete(callback)
機能
1書体毎にWebフォント適用後の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
引数
callback (必須) : コールバック関数
戻り値(XML)
res_result : 処理結果ステータス(OK/NG)
api_key : APIキー
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.font[0].name : フォント名
    res.font[0].status : ステータス: true/false

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet">
body {
  font-family: 'Maru Folk Heavy';
}
#callback {
  color: blue;
  visibility: hidden;
}
</style>
<script type="text/javascript">
callback = function(res) {
  var css = document.getElementById('callback');

  if (res.type == 'css') {
    css.textContent = res.data;
  }
  if (res.code == 0) {
    css.style.visibility = 'visible';
alert('フォントの適用後です');
  }
}
Ts.onPostComplete(callback);
Ts.setLoadStart(0);
</script>
</head>
<body>
  <p>コールバックなし</p>
  <p id="callback">コールバックあり(適用後)</p>
  <button onclick="Ts.reload();">フォントをロード</button>
</body>
</html>

Webフォントのダウンロードが完了したら適用後にコールバックします。サンプルをリロードしてお試し下さい。

ダイナミックリクエストCSS

メソッド
Ts.dynamicCss(callback, text, font, name, key, hint)
機能
指定した文字列に対するWebフォントをCSSで返します。
引数
callback (必須) : コールバック関数
text (必須) : 指定文字列
font (必須) : フォント名
name (必須) : 任意の書体名
key (必須) : 識別キー
hint (必須) : ヒント有無の設定 (0:設定なし、1:ヒント付与、2:ヒント強制除去)
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.type : 'css'
    res.font : フォント名
    res.name : 任意の書体名
    res.text : 指定文字列
    res.key : 識別キー
    res.data : CSSデータ
CSSデータ :
    @font-face {
        font-family: '任意の書体名';
        src: url(data:font/woff;base64,d09GRgA...);
        }

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet" id="dynamic_css"></style>
<script type="text/javascript">
callback = function(res) {
    var css = document.getElementById('dynamic_css');

    if (res.type == 'css') {
        css.textContent = res.data;
    }
}
dynamicRequest = function() {
    var el = document.getElementById('dynamic_text');

    el.style.fontFamily = 'dynamic_font';
    Ts.dynamicCss(callback, el.value, 'Folk Heavy', 'dynamic_font', '', '');
}
</script>
</head>
<body>
    <input id="dynamic_text" type="text" style="width: 100px;">
    <button type="button" onclick="dynamicRequest();">適用</button>
</body>
</html>

何か文字列を入力して「適用」をクリックしてください。

ダイナミックリクエストJSON

メソッド
Ts.dynamicJson(callback, text, font, name, key, hint)
機能
指定した文字列に対するWebフォントをJSON形式で返します。
引数
callback (必須) : コールバック関数
text (必須) : 指定文字列
font (必須) : フォント名
name (必須) : 任意の書体名
key (必須) : 識別キー
hint (必須) : ヒント有無の設定(デフォルト:0、強制付与:1、強制除去:2)
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.type : 'json'
    res.font : フォント名
    res.name : 任意の書体名+ランダム文字列
    res.text : 指定文字列
    res.key : 識別キー
    res.data : JSONデータ
JSONデータ :
    {
        "fontFamily":"任意の書体名+ランダム文字列",
        "format":"woff",
        "src":"d09GRgABAAAAAC4kABEAAAAAQ..."
        }

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
callback = function(res) {
    if (res.type == 'json') {
        var json = document.createElement('div');
        json.textContent = res.data;
        document.body.appendChild(json);
    }
}
dynamicRequest = function() {
    var el = document.getElementById('dynamic_text');

    el.style.fontFamily = 'dynamic_font';
    Ts.dynamicJson(callback, el.value, 'Folk Heavy', 'dynamic_font', '', '');
}
</script>
</head>
<body>
    <input id="dynamic_text" type="text" style="width: 100px;">
    <button type="button" onclick="dynamicRequest();">適用</button>
</body>
</html>

何か文字列を入力して「適用」をクリックしてください。

フォント適用範囲指定

メソッド
Ts.setSelector(selector)
機能
文字を抽出するセレクタを指定します。
引数
selector (必須) : セレクタ
備考
検索優先順位は id > name > jQuery(ロード時) > querySelectorAll > original となります。

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
Ts.setSelector('#setselector');
</script>
<style type="text/css" rel="stylesheet">
#nonselector {
    font-family: 'Kaimin Sora Regular';
}
#setselector {
    font-family: 'Kaimin Sora Heavy';
    color: blue;
}
</style>
</head>
<body>
    <p id="nonselector">セレクタ指定なし</p>
    <p id="setselector">セレクタ指定あり</p>
</body>
</html>

ロード時動作指定

メソッド
Ts.setLoadStart(use)
機能
ロード時のフォント配信の有無を切り替えます。
引数
use (必須) : ロード時のフォント配信の有無(配信なし:0、配信あり:1)
備考
なし

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
Ts.setLoadStart(0);
</script>
<style type="text/css" rel="stylesheet">
#nonload_text {
    font-family: 'Kaimin Tsuki Bold';
}
</style>
</head>
<body>
    <span id="nonload_text">最初はフォントがロードされません。</span>
    <button type="button" onclick="Ts.reload();">フォントをロード</button>
</body>
</html>

リロード

メソッド
Ts.reload()
機能
フォントの配信を実行する。
引数
なし
備考
配信タグに指定したフェードなどのオプション動作を継承します。

サンプル

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
changeText = function() {
    document.getElementById('reload_text').innerHTML = 'それはシンプルなテキストですか?';
}
</script>
<style type="text/css" rel="stylesheet">
#reload_text {
    font-family: 'Kaimin Tsuki Heavy';
}
</style>
</head>
<body>
    <span id="reload_text">これはサンプルのテキストです。</span>
    <button type="button" onclick="changeText();">テキスト変更</button>
    <button type="button" onclick="Ts.reload();">リロード</button>
</body>
</html>