TypeSquare API Reference

*The use policy of this API is the same as that of TypeSquare.

1. Fade-in function

Overview

Some browsers (for example IE) display a default font while the page is being rendered. This can cause screen flicker when the web font is applied. This flicker can be prevented using the fade-in function.

Fade-in

Sample

*Please replace the argument for the distribution ID of the plan-specific tag used in the sample code with your distribution ID.

No fade-in argument specified.

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

Tag with fade-in value of 10 msec.

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

2. TypeSquare Web API

Overview

The TypeSquare Web API issues keys using the distribution ID. This key can be used to manage registered URLs, acquire page views and lists of available fonts, and perform other operations.

Authentication

Function
Issue a TypeSquare Web API key
URL
https://typesquare.com/en/api/auth
Parameter(POST)
Id (required):distribution ID
Password (required) : password
Return value(XML)
res_result : Process result status(OK/NG)
api_key : API Key
Error code
0000 : Failed to get POST data
1101 : Authentication failed
1102 : Registration failed
9998 : Under maintenance now. Please try again later.
Remark
The API key will expire after 24 hours of inactivity.

Sample

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <form action="https://typesquare.com/en/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>

Enter the distribution ID and password and click send.

Register URL

Function
Register site for TypeSquare use
URL
https://typesquare.com/en/api/service
Parameter(POST)
method : typesquare.regist.url
api_key : API Key
url_text : URL to be registered
Return value(XML)
res_result : Process result status(OK/NG)
res_err_code : Error code
Error code
0000 : Failed to get POST data
0001 : Bad API method
0002 : Authentication failed. The API key is invalid or expired. Perform authentication again.
1301 : Base64 encode failure
1302 : URL is already registered
1303 : Failed to get contract information
1304 : Maximum number of URLs exceeded
1305 : URL registration failed.
1306 : Failed to register distribute authentication
1307 : URL contains illegal characters
9998 : Under maintenance now. Please try again later.
Remark
The URL to be registered must be base64 encoded.

Sample

<!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/en/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>Registrationurl: <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 used in the sample can be found at the following Apache License 2.0 URL:
https://github.com/infowrap/base64/

Enter api_key and registration URL. Click "base64 encode" button to convert the registration URL and then click send.

Release URL

Function
Remove TypeSquare registration for a URL
URL
https://typesquare.com/en/api/service
Parameter(POST)
method : typesquare.delete.url
api_key : API Key
url_text : URL to be released
Return value(XML)
res_result : Process result status(OK/NG)
res_err_code : Error code
Error code
0000 : Failed to get POST data
0001 : Bad API method
0002 : Authentication failed. The API key is invalid or expired. Perform authentication again.
1401 : Base64 encode failure
1402 : Could not find URL
1403 : Failed to release URL
1404 : Failed to remove distribution authentication
9998 : Under maintenance now. Please try again later.
Remark
The URL to be released must be base64 encoded.

Sample

<!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/en/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>Deleteurl: <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 used in the sample can be found at the following Apache License 2.0 URL:
https://github.com/infowrap/base64/

Enter api_key and delete URL. Click "base64 encode" to convert the delete URL and then click send.

Get list of registered URLs

Function
Get list of registered URLs
URL
https://typesquare.com/en/api/service
Parameter(POST)
method (Required) : typesquare.get.url
api_key (Required) : API Key
Return value(XML)
res_result : Process result status(OK/NG)
dtls : List of registered URLs
res_err_code : Error code
Error code
0000 : Failed to get POST data
0001 : Bad API method
0002 : Authentication failed. The API key is invalid or expired. Perform authentication again.
1201: Failed to get list of registered URLs.
9998 : Under maintenance now. Please try again later.
Remark
The URLs returned are base64 encoded.

Sample

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <form action="https://typesquare.com/en/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>

Enter API key and click send.

Get the PV (page views) for a site in a given date range

Function
Obtain the number of page views a site has received in a given date range.
URL
https://typesquare.com/en/api/service
Parameter(POST)
method (Required) : typesquare.get.pv
api_key (Required) : API Key
url_text (Optional) : Registration URL
start_date (Required) : Start date(YYYYMMDD)
end_date (Required) : End date(YYYYMMDD)
Return value(XML)
res_result : Process result status(OK/NG)
dtls : Operation result (see sample result below)
res_err_code : Error code
Error code
0000 : Failed to get POST data
0001 : Bad API method
0002 : Authentication failed. The API key is invalid or expired. Perform authentication again.
1501 : Failed to check specified term
1502 : Base64 encode failure
9998 : Under maintenance now. Please try again later.
Remark
The URL must be base64 encoded..
The returned URL is base64 encoded.

Sample

<!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/en/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>targeturl: <input type="text" name="url_text"><input type="button" value="base64 encode" onclick="encode_url('url_text');"></p>
        <p>Start date: <input type="text" name="start_date" placeholder="YYYYMMDD"></p>
        <p>End date: <input type="text" name="end_date" placeholder="YYYYMMDD"></p>
        <p><input type="submit" name="submit" value="send"></p>
    </form>
</body>
</html>

* base64v1_0.js used in the sample can be found at the following Apache License 2.0 URL:
https://github.com/infowrap/base64/

Enter the api_key, target URL, start date, and end date. Click "base64 encode" to convert the target and then click send.

Get font list

Function
Acquire a list of the fonts that meet the specified conditions.
URL
https://typesquare.com/en/api/service
Parameter(POST)
method (Required) : typesquare.get.font
api_key (Required) : API Key
fontname (Optional) : Typeface name (example: Midashi Min)
familyname (Optional) : Family name (example: midashi min)
fontmaker (Optional) : Manufacturer name (example: Morisawa)
familystyle (Optional) : Type face classification (example: Mincho/Gothic)
weight (Optional) : Weight (example: light/medium/bold/extra-bold)
language (Optional) : Language (example: Japanese)
Return value(XML)
res_result : Process result status(OK/NG)
dtls : Fonts that match the given specification
res_err_code : Error code
Error code
0000 : Failed to get POST data
0001 : Bad API method
0002 : Authentication failed. The API key is invalid or expired. Perform authentication again.
1701 : Base64 encode failure (Font name)
1702 : Base64 encode failure (Font family name)
1703 : Base64 encode failure (Font vender name)
1704 : Base64 encode failure (Font classification)
1705 : Base64 encode failure (Font weight)
1706 : Base64 encode failure (Language)
1707 : Font does not exist
9998 : Under maintenance now. Please try again later.
Remark
The font name, font family, manufacturer name, classification, weight, and language must all be base64 encoded.
All condition settings are optional. If a condition is specified, only those fonts with an exact match will be returned.

Sample

<!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/en/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>Typeface name: <input type="text" name="fontname"></p>
        <p>Family name: <input type="text" name="familyname"></p>
        <p>Manufacturer name: <input type="text" name="fontmaker"></p>
        <p>Typeface classification: <input type="text" name="familystyle"></p>
        <p>Weight: <input type="text" name="weight"></p>
        <p>Language: <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 used in the sample can be found at the following Apache License 2.0 URL:
https://github.com/infowrap/base64/

Enter api_key and optional refined item. Click "base64 encode" to convert the target and then click send.

3. TypeSquare JavaScript API

Overview

The TypeSquare JavaScript API is an extension of the font delivery system. It enables access to a variety of web font events, allowing further processing via JavaScript, etc. Web fonts may be acquired at any time, allowing application of Web fonts in the selector unit.
To use the extended functions, change "/accessor/en/script " in the distribution tag to "/accessor/en/apiscript ".

Download callback

Method
Ts.onComplete(callback)
Function
Registers a callback function to be executed once all TypeSquare fonts have finished downloading, or the download has timed out, allowing further processing via JavaScript, etc.
Parameter
callback (Required) : Callback Function
Return value(XML)
res_result : Process result status(OK/NG)
api_key : API Key
Remark
callback(res)
    res.code : 0:normalcy, -1:load error, 1:no target to convert
    res.font[n].name : Font name
    res.font[n].status : Status: true/false

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/en/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>Without Call Back</p>
    <p id="callback">With Call Back</p>
</body>
</html>

When download of the web font is finished, callback is performed. Please reload it.

Download callback (before web font application)

Method
Ts.onPreComplete(callback)
Function
Register a callback function to be executed after a web font has been downloaded but before it is applied, allowing further processing via JavaScript, etc.
Parameter
callback (Required) : Callback Function
Return value(XML)
res_result : Process result status(OK/NG)
api_key : API Key
Remark
callback(res)
    res.code : 0:normalcy, -1:load error, 1:no target to convert
    res.font[n].name : Font name
    res.font[n].status : Status: true/false

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="//typesquare.com/accessor/en/apiscript/typesquare.js?5JuLAH0EzrI%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('Before the font applied');

        css.style.visibility = 'visible';

    }

}

Ts.onPreComplete(callback);

Ts.setLoadStart(0);

</script>

</head>

<body>

    <p>Without Call Back</p>

    <p id="callback">With Call Back(Before Apply)</p>

    <button onclick="Ts.reload();">Load Font</button>

</body>

</html>

When download of the web font is finished, the callback is executed before the web font applied. Please reload it.

Download callback (after web font application)

Method
Ts.onPostComplete(callback)
Function
Register a callback function to be executed after web font download and application, allowing further processing via JavaScript, etc.
Parameter
callback (Required) : Callback Function
Return value(XML)
res_result : Process result status(OK/NG)
api_key : API Key
Remark
callback(res)
    res.code : 0:normalcy, -1:load error, 1:no target to convert
    res.font[n].name : Font name
    res.font[n].status : Status: true/false

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="//typesquare.com/accessor/en/apiscript/typesquare.js?5JuLAH0EzrI%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('Ather the font applied');

    }

}

Ts.onPostComplete(callback);

Ts.setLoadStart(0);

</script>

</head>

<body>

    <p>Without Call Back</p>

    <p id="callback">With Call Back(After Apply)</p>

    <button onclick="Ts.reload();">Load Font</button>

</body>

</html>

The callback is executed after the web font is downloaded and applied. Please reload it.

Dynamic CSS request

Method
Ts.dynamicCss(callback, text, font, name, key, hint)
Function
The web font corresponding to the specified string is returned via CSS.
Parameter
callback (Required) : Callback Function
text (Required) : Specified string
font (Required) : Font name
name (Required) : Optional typeface name
key (Required) : Identification key
hint (Required) : Setting of hint/no hint(0:no setting, 1:add hint, 2:force remove hint)
Remark
callback(res)
    res.code : 0:normalcy, -1:load error, 1:no target to convert
    res.type : 'css'
    res.font : Font name
    res.name : Optional typeface name
    res.text : Specified string
    res.key : Identification key
    res.data : CSS Data
CSSData :
    @font-face {
        font-family: 'Optional typeface name';
        src: url(data:font/woff;base64,d09GRgA...);
        }

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/en/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();">Application</button>
</body>
</html>

Enter a string and click "Apply".

Dynamic JSON request

Method
Ts.dynamicJson(callback, text, font, name, key, hint)
Function
The web font corresponding to the specified string is returned in the JSON format.
Parameter
callback (Required) : Callback Function
text (Required) : Specified string
font (Required) : Font name
name (Required) : Optional typeface name
key (Required) : Identification key
hint (Required) : Required setting of hint/no hint(default:0, force add hint:1, force remove hint:2)
Remark
callback(res)
    res.code : 0:normalcy, -1:load error, 1:no target to convert
    res.type : 'json'
    res.font : Font name
    res.name : Optional typeface name + random string
    res.text : Specified string
    res.key : Identification key
    res.data : JSON Data
JSONData :
    {
        "fontFamily":"Optional typeface name + random string",
        "format":"woff",
        "src":"d09GRgABAAAAAC4kABEAAAAAQ..."
        }

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/en/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();">Application</button>
</body>
</html>

Enter a string and click "Apply".

Specifying the range of fonts applied

Method
Ts.setSelector(selector)
Function
Specify the selector to extract letters.
Parameter
selector (Required) : Selector
Remark
The search priority is id > name > jQuery(Load) > querySelectorAll > original

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/en/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">Selector not specified</p>
    <p id="setselector">Specified selector</p>
</body>
</html>

Enable or disable font distribution at load time

Method
Ts.setLoadStart(use)
Function
Select whether or not to distribute fonts at load time.
Parameter
use (Required) : Fonts distributed at load time (Not distributed:0, Distributed:1)
Remark
None

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/en/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">Fonts are not loaded at first.</span>
    <button type="button" onclick="Ts.reload();">Load font</button>
</body>
</html>

Reload

Method
Ts.reload()
Function
Execute font distribution.
Parameter
None
Remark
Inherits the optional operations such as the fade operation specified in the distribution ID.

Sample

*Replace the argument section in the sample code with your distribution ID.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/en/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
changeText = function() {
    document.getElementById('reload_text').innerHTML = 'Is that a simple text?';
}
</script>
<style type="text/css" rel="stylesheet">
#reload_text {
    font-family: 'Kaimin Tsuki Heavy';
}
</style>
</head>
<body>
    <span id="reload_text">This is a sample text.</span>
    <button type="button" onclick="changeText();">Change text</button>
    <button type="button" onclick="Ts.reload();">Reload</button>
</body>
</html>