TypeSquare

Language of the service which you are trying to access differs from your region.
You can register TypeSquare in Japan, United States, Taiwan and Korea.

Please choose the language that you want to use.
Notice that the service contents are different for each region.

This product includes GeoLite2 data created by MaxMind, available from http://www.maxmind.com.

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 JavaScript API

Overview

TypeSquare JavaScript API is an extended function of the font distribution. It can acquire an event to which the cloud font has been applied and continuously write processing using YY, etc. You can acquire the cloud font at any given time or specify its application for each selector.
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
receiving the event of the result notice of web font creation for each font, and can add continuous process code using JavaScript, etc. before the created web font has applied. It registers the callback function to be called in the case of a complete event.
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
receiving the event of the result notice of web font creation for each font, and can add continuous process code using JavaScript, etc. after the created web font has applied. It registers the callback function to be called in the case of a complete event.
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 type face 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 type face 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>

3. TypeSquare Web API


Here is API v2