Auto TTF

Auto TTF

This plugin allows you to render text using True Type Fonts. It works by replacing the inner text of an html node with an image referencing a dynamically generated image of text. Works using only javascript (no flash required) and it’s SEO friendly.

Download

  Auto TTF 1.0.4 (184.5 KiB)

Usage

Once you have installed the plugins, go to Settings->Auto TTF and define some style rules. Rules are defined using a syntax similar to CSS. Next your html either in your content or your template files and add the class ‘autottf‘ and class names corresponding to the rules you’ve defined. The html will be automatically upgraded when the document finishes loading. If no rule is found that matches any of the classes on the node, the ‘default‘ is automatically applied so make sure there is already a default rule defined. TTF fonts must live in the ‘assets‘ folder. Fonts will always render on a transparent background so make sure to accomodate for png files in internet explorer.

The rule names are arbitrary so it can be whatever you like. Styles are defined within curly brackets similar to the CSS rules are defined. Each style must be terminated with a semicolon. Valid style settings are:

-size font size in pixels (integer)

-font Filename of font without the .ttf extension (string)

-color Color defined as RGB values (array)

-maxwidth Maximum width in pixels string can get before it splits it into multiple lines (integer)

-transform Transform the text to uppercase (upper), lowercase (lower), or camelcase (camelize) (string)

Example Rules

default { font:arial; color: 255,255,255; size: 12; }

bigheader { font:Comic_San_MS; color: 255,0,0; size: 24; maxwidth: 300; }

Example Html

<h1 class=”autottf bigheader”>This is my big ole header</h1>

Note

You must provide your own true type fonts! Just copy them into the assets and reference them with the font style.

Internet Explorer 6 is NOT supported. Html nodes will be left unmodified for that browser.

Sites that use Auto-TTF:

Alima Pure