Clone this wiki locally
PNGText is a Kohana 3 module allowing you to use whichever fonts you wish on your web site. Unlike cufon and other related scripts, PNGText does not send font data to the user’s browser – it generates the images on the server side based upon your CSS styles. It seamlessly integrates with jQuery and is ridiculously easy to use.
PNGText draws 24-bit transparent PNGs so they work well with backgrounds, and can even support rollovers/hovering. PNGText will also support caching of images based upon the styles and text used – if either is changed, the images will be refreshed automatically.
PNGText supports the following CSS styles:
Support is planned for text-shadow (although PHP has a bug preventing this for the time-being).
Checkout the project into your Kohana application’s modules folder under the name pngtext. Activate the module in your bootstrap.php file.
Configuring PNGText in Kohana
Configuration settings are in the config/pngtext.php file.
- debug – Set to TRUE to display errors with PNGText as images (Use FALSE for production)
- fonts – An array of font name => font file values that you will use on your site.
Place any supported font files (.ttf, .otf) that you wish to use in the fonts folder. The names of these files are what you use in the step above.
Configuring PNGText on your Site
PNGText requires jQuery to function. Add the following line to your section to activate PNGText:
You MUST make sure to use the id=“pngtext” attribute in your script tag, otherwise it will not function.
In order to replace your text with PNGText, use the following:
Replace h2 with any jQuery selector you wish. cabnd should be replaced with the font name you specified in your configuration file.
Using PNGText with Hover
Hovering couldn’t be any easier than with PNGText. It supports only a change in color as of now (but fortunately this is likely the only style you’ll be modifying on a rollover – until text-shadow support is added).
The above will change the text color to black upon rollover.