fonten

Why fonten?

The online and real time fonten builds a much smaller size font file that contains only specified characters. One runs a fonten server that hosts all his or her favorite fonts and builds subset font file on the fly. For Chinese fonts, the subset font file built by fonten is only a few KB, which is less than 1/1000 of the original size (10~20MB). What makes it even better? It's open source!

How to use?

To be specific, fonten contains a server side runtime provides dynamic font files and a set of APIs for the client. You need to host your own fonten server and upload authorized fonts to the server to make it work. We don't have a centralized server and we don't provide orginal fonts. Your fonten server can be hosted on Google App Engine/Java for free, and don't worry, you don't need to know how to write Java.
about GAE's free quota

Example Usage

  @font-face{ 
    font-family: myfont; 
    src: url('/font?id=opensans&text=SomeCharaters&format=eot'); 
  }
            

Install fonten server

1. Start a Google App Engine (GAE) project, say my_gae_project.
2. Download and install GAE for Java
3. Download fonten git clone git://github.com/flyakite/fonten.git
4. Change application name in appengine-web.xml to my_gae_project and import the project to GAE.
5. Deploy it to GAE server. Your server is now at http://my_gae_project.appspot.com/
6. Go to http://my_gae_project.appspot.com/fontlist and upload your font file.

Simple API (GET API)

Use Simple API if you only need not so many characters ( ~<2000 for Ascii and ~<200 for encoded Chinese characters to comply with IE's URL limit)
Request to your server's /font with following parameters to get the font:

id

Font id, this is the same as you specified when you upload your font

text

Input character set. The subset font file can be cached and reused better if the input characters are unique and sorted.

format

Font format. "eot" or "woff". If not specified, the oringal font format is served. (optional)

strip

Strip hinting. Usually available in truetype font(.ttf). Default is true, set to "0" to stop stripping.(optional)

Example css:

 

  @font-face{
    font-family: myfont;
    src: url('/font?id=opensans&text=ABC&format=eot');
    src: local('☺'); 
    src: url('/font?id=opensans&text=ABC&format=woff'') format('woff');
    src: url('/font?id=opensans&text=ABC') format('truetype');
  }
            

Advanced API (POST API)

Use Advanced API if you want to get subset font file with more characters. You need to post the input character set to the fonten server first, exchange a reserved token and use the token to get the font file.
POST request to your server's/reserve to reserve a token with parameters:

text

Charaters you want with the font.

Example javascript:

  $.ajax({
    type: 'POST',
    url: options.server + '/reserve',
    crossDomain: true,
    data: {text: text},
    dataType: 'json',
  });
            

and assign the to /font with parameters like in Simple API and the following:

token

Reserved token returned from server.

  var fontURL = "http://fonten-demo.appspot.com/font?id=opensans&token=" + reservedToken     
            

jQuery Plugin

Use fonten jQuery plugin to change font and interact with fonten server can should be easier. (source)
Example 1:

  $('#selector').fonten({
    id: 'opensans'
  });
            

fonten jQuery plugin options:

id

Font ID, specified on fonten server.
Font ID can also be specified in the html tag data-attribute.

  <div class="fonten" data-font-id="opensans">OpenSans</div>
  <div class="fonten" data-font-id="droidsans">DroidSans</div>
                

server

fonten server URI, default points to current server. e.g: "http://myfonten.appspot.com"

fontPath

Font path on fonten server, default is "/font"

reservePath

Font reservation path on fonten server, default is "/reserve"

strip

Whether to strip font hinting, default is true, can be set to 0 or false

success

callback function when the font is successfully loaded

error

callback function when an error occured

Example 2:

  $.fonten({
    fontTextDict: {
      'opensans': 'ABCD'
    },
    success: function(fontID, fontFamily){
      console.log('success! start to paint my canvas');
    }
  });
            

fontTextDict

Sometimes, there is no element in the dom tree we want to manipulate. We just need the font to be loaded. In this situation, can specify fontTextDict as a font ID - text dictionary mapping and give it to $.fonten to load the font of the specified text.

Powered by

This project is developed based on sfntly and Google App Engine/Java.

Author

Shih-Wen Su
sushi@summeridea.com
github

License

Apache 2.0