※The user policy of this API is the same as that of TypeSquare.
URL tag options enable you to change actions during loading a web font by adding parameters to typesquare.js which is a tag for distribution.
This can set the fade-in time to show a web font gradually as you want.
* ”-1 (negative one)” can be set for showing the default font.
* Please replace the distribution ID (a parameter of typesquare.js) in the sample code with your distribution ID which is provided as your plan tag.
<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=1500" charset="utf-8"></script>
<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=-1" charset="utf-8"></script>
This can automatically detect the text which was changed on a page and load web font for it.
* A one second interval happens to avoid overloading the text if it was changed in succession.
* Please note that it may result in excess of the number of distributable PV because a PV will be consumed per loading the font.
* Please replace the distribution ID (a parameter of typesquare.js) in the sample code with your distribution ID which is provided as your plan tag.
<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&auto_load_font=true" charset="utf-8"></script>
This can stop loading the font when a page load.
* Another function will be needed if you want to deliver the font after stopping it.
* Please replace the distribution ID (a parameter of typesquare.js) in the sample code with your distribution ID which is provided as your plan tag.
<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>
This can deliver a font towards text of a hidden attribute.
* Please replace the distribution ID (a parameter of typesquare.js) in the sample code with your distribution ID which is provided as your plan tag.
<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_hidden=true" charset="utf-8"></script>
This can suppress delivering a font towards text specified with a pseudo-element such as “after” or “before”.
* Please replace the distribution ID (a parameter of typesquare.js) in the sample code with your distribution ID which is provided as your plan tag.
<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_pseudo=false" charset="utf-8"></script>
Method
|
Ts.loadFontAsync(FontObj)
|
|||||||||||||||||||||
Function
|
This can get a web font of text specified with parameters.
|
|||||||||||||||||||||
Parameter
|
FontObj: a font object
|
|||||||||||||||||||||
Note
|
Parameters which can be specified as a font object
* Please note that it may result in excess of the number of distributable PV because a PV will be consumed per loading the font.
|
* Please replace an argument in the sample code with your tag which is provided for your plan.
<!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/en/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="Load a font using a font getting function in API Methods" /> <input class="btn" type="button" onclick="document.location.reload();" value="Reload this sample" /> <p id="target" class="t1">TypeSquare will completely change the design of your website.</p> </div> </body> </html>
Method
|
Ts.loadFont()
|
Function
|
This can reload a font for all text on the page.
|
Note
|
* Please note that it may result in excess of the number of distributable PV because a PV will be consumed per loading the font.
|
* Please replace an argument in the sample code with your tag which is provided for your plan.
<!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/en/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="Load a font using a font loading function in API Methods" /> <input class="btn" type="button" onclick="document.location.reload();" value="Reload this sample" /> <p class="t1">TypeSquare will completely change the design of your website.</p> </body> </html>
Method
|
Ts.setQuerySelector(selector)
|
Function
|
This can specify a selector to apply a font.
|
Parameter
|
selector: a selector
|
* Please replace an argument in the sample code with your tag which is provided for your plan.
<!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/en/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 will completely change the design of your website.</p> <p class="font02">TypeSquare will completely change the design of your website.</p> </body> </html>
Method
|
Ts.setAutoLoadFontSelector(selector, sleep)
|
Function
|
This can monitor a specified selector and automatically load a font when the internal text is changed. If the text change occurs multiple times within the autoloading queue time specified, the next change will be proceeded
after the queue time.
|
Parameter
|
Selector: a selector
sleep: reloading queue time (millisecond) |
Note
|
* Please note that it may result in excess of the number of distributable PV because a PV will be consumed per loading the font.
|
* Please replace an argument in the sample code with your tag which is provided for your plan.
<!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/en/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="Reload this sample" /> <p class="t1">You can try to input any words you want using a web font</p> <input type="text" maxlength="18" style="width:40%;" placeholder="Please input words you want to apply here." id="word"> <p class="t2" id="target"></p> </body> </html>
Method
|
Ts.onFontDownloaded(function)
|
Function
|
This can get an event of notification before getting each web font and process continuous scripts such as JapaScript and so on. It registers a function which is called at the time of the event.
|
Parameter
|
function: a function
|
* Please replace an argument in the sample code with your tag which is provided for your plan.
<!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/en/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('Change the font color.'); } } Ts.onFontDownloaded(sample); </script> </head> <body> <input class="btn" type="button" onclick="Ts.loadFont();" value="Load a font" /> <input class="btn" type="button" onclick="document.location.reload();" value="Reload this sample" /> <p id="target" class="t1">TypeSquare will completely change the design of your website.</p> </body> </html>
Once the web font is downloaded, it will run a callback function which was passed before applying the font.
Method
|
Ts.onFontRendered(function)
|
Function
|
This can get an event of notification after applying each web font and process continuous scripts such as JapaScript and so on. It registers a function which is called at the time of the event.
|
Parameter
|
function: a function
|
* Please replace an argument in the sample code with your tag which is provided for your plan.
<!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/en/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('Change the font color.'); } } Ts.onFontRendered(sample); </script> </head> <body> <input class="btn" type="button" onclick="Ts.loadFont();" value="Load a font" /> <input class="btn" type="button" onclick="document.location.reload();" value="Reload this sample" /> <p id="target" class="t1">TypeSquare will completely change the design of your website.</p> </body> </html>
Once the web font is downloaded, it will run a callback function which was passed after applying the font.
Method
|
Ts.onFontLoaded(function)
|
Function
|
This can get an event of notification after applying all web fonts and process scripts such as JapaScript and so on. It registers a function which is called at the time of the event.
|
Parameter
|
function: a function
|
* Please replace an argument in the sample code with your tag which is provided for your plan.
<!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/en/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('Change the font color.'); } } Ts.onFontLoaded(sample); </script> </head> <body> <input class="btn" type="button" onclick="Ts.loadFont();" value="Load a font" /> <input class="btn" type="button" onclick="document.location.reload();" value="Reload this sample" /> <p id="target" class="t1">TypeSquare will completely change the design of your website.</p> </body> </html>
Once the web fonts are downloaded, it will run a callback function which was passed after applying the fonts.