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="https://www.text2png.com/fonts_list.css" rel="stylesheet" type="text/css" />
Right before the </body> tag.
When the page loads, call the initiation function
text2pngAPI.ini(holder element id [, options]);
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.
The fonts list uses CSS style sheet for skinning everything, you can view the CSS file at https://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.
You can customize the list even further using the Fonts API options.
|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|
The Fonts API include the following events:
|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|
Finally, here is a list of methods you can use to interact with the Fonts API at run time.
|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|