*The use policy of this API is the same as that of TypeSquare.
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.
*Please replace the argument for the distribution ID of the plan-specific tag used in the sample code with your distribution ID.
<script type="text/javascript" src="//typesquare.com/accessor/en/script/typesquare.js?q76O1i4KMzo%3D" charset="utf-8"></script>
<script type="text/javascript" src="//typesquare.com/accessor/en/script/typesquare.js?q76O1i4KMzo%3D&fadein=10" charset="utf-8"></script>
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 ".
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 |
*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.
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 |
*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.
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 |
*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.
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...); } |
*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".
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..." } |
*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".
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
|
*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>
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
|
*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>
Method
|
Ts.reload()
|
Function
|
Execute font distribution.
|
Parameter
|
None
|
Remark
|
Inherits the optional operations such as the fade operation specified in the distribution ID.
|
*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>