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

※The user policy of this API is the same as that of TypeSquare.

1. URL Tag Options

Overview

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.

A setting for fade-in

Function

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.

Sample

* 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.

A tag for fading in: set “fadein=1500” as a parameter which means it will fade in in 1500 milliseconds

<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=1500" charset="utf-8"></script>

A tag without useing fading in: set “fadein=-1” (negative one) as a parameter for distribution ID.

<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a335a40e5e849e4ac6948abac1e029f&fadein=-1" charset="utf-8"></script>

A setting for autoloading a font

Function

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.

Sample

* 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.

A tag for autoloading the font text: set “auto_load_font=true” as a parameter

<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&auto_load_font=true" charset="utf-8"></script>

A setting for an action during loading

Function

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.

Sample

* 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.

A tag for stop loading the font: set “onload=false” as a parameter

<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&onload=false" charset="utf-8"></script>

A setting for loading a hidden element font

Function

This can deliver a font towards text of a hidden attribute.

Sample

* 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.

A tag for loading the font for hidden elements: set “apply_to_hidden=true” as a parameter

<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_hidden=true" charset="utf-8"></script>

A setting for loading a pseudo-element font

Function

This can suppress delivering a font towards text specified with a pseudo-element such as “after” or “before”.

Sample

* 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.

A tag for not loading the font for psedo elements: set “apply_to_pseudo=false” as a parameter

<script type="text/javascript" src="//typesquare.com/3/tsst/script/en/typesquare.js?5a2e354934b04540b59d7612ac1e029f&apply_to_pseudo=false" charset="utf-8"></script>

2. API Methods

Getting fonts

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
Parameter Required Description
cssName Required CSS setting name
text Required Text
callback Required Callback: a function
fontFamily - Any font-family name: a cssName setting value
outputType - Output format (css/json): css
callbackId - Callback ID: a timestamp
* Please note that it may result in excess of the number of distributable PV because a PV will be consumed per loading the font.

Sample

* 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>

Loading fonts

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.

Sample

* 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>

Specifying the scope of applying of font

Method
Ts.setQuerySelector(selector)
Function
This can specify a selector to apply a font.
Parameter
selector: a selector

Sample

* 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>

Specifying the scope of autoloading of font

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.

Sample

* 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>

3. API Events

Before applying a font

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

Sample

* 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.

After applying a 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

Sample

* 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.

After applying all fonts

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

Sample

* 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.