Fonts API

Purpose:

Would you like to use our script in a blog or content management system? Since there are too many systems out there, we can’t manage and build all the needed models and plug ins for each. However, we would love to help anyone build and customize a plug in for any system out there, so we made an easy to use font’s selection tool. This will allow the website administrator to select the font they need to use on any parts of their website.

Including the Script:

In order to include the Fonts API into your system, simple add the following code to your page. You only can include the Font API list once in your HTML page. If you need to select more than font for different parts, use the Fonts API Events to capture the user input.

In the head section:

<link href="http://www.text2png.com/fonts_list.css" rel="stylesheet" type="text/css" />

Right before the </body> tag.

<script language="javascript" src="http://www.text2png.com/fonts_list.js"></script>
<script language="javascript" src="http://www.text2png.com/fonts_list.js.php"></script>

When the page loads, call the initiation function

text2pngAPI.ini(holder element id [, options]);

Contribute:

If you built a model or a plug in in for an open source system (such as WordPress or Joomla) and would like to list it here. Feel free to contact us today.

Skinning:

The fonts list uses CSS style sheet for skinning everything, you can view the CSS file at http://www.text2png.com/fonts_list.css. In order to change the style, simple add your own CSS style sheet or overwrite any CSS rules.

The image below illustrate the different parts of the fonts list and the CSS classes for each part.

api_skinning

Options

You can customize the list even further using the Fonts API options.

Option Description Default
fontsPerPage This option will set the number of fonts visible at each page. 10
pageNum Set the page that will be first visible when the font list is generated. 1
font The selected font name, must match a font name exactly (case insensitive). blank
variant The font variant (bold, italic, etc…) blank

Events:

The Fonts API include the following events:

Event Description Default
onSelect The event will be fired each time the user select a font. It passes two variables to the function, the font name and the variation. empty function
onUnSelect The event will be fired each time the user unselect a font. It passes two variables to the function, the font name and the variation. empty function
onOpen The event will be fired each time the Fonts list is opened. empty function
onClose The event will be fired each time the Fonts list is closed. empty function

Methods:

Finally, here is a list of methods you can use to interact with the Fonts API at run time.

Method Description Arguments
buildHTML() Re-build the font list HTML N/A
searchFont(term) Search the fonts list and generate a new list based on the search term. Might not return all fonts. term: the search term
viewAll() Show all the fonts available (reverse searchFont) N/A
goToPage(number) Go to a specific page. number: the page number
open() Open the fonts list. N/A
close() Close the fonts list. N/A
toggle() Toggle the fonts list. N/A