Documentation

Howto

Getting started

First thing to do is you sign-up. Having done that you need upload one or more TrueType font files into your account.

Next you need to decide which of your websites will use which of the fonts you just uploaded. You do this by creating a dedicated 'apikey' for your website.

Load the javascript library

Having done that you need to load the webfonts javascript code somewhere in between the <head> and </head> tags and pass the special APIKEY as a parameter: 


...
<script type="text/javascript" src="http://webfonts.biz/api?key=somesecretauthkey"></script>
...

Configuration

Next, you need to tell the Webfonts service which elements to replace with images. Say you've uploaded the free 'SF Arch Rival' font, and want to replace all H1 tags with generated images using this font:


...
<script language="javascript">
function initialize() {
	LabelImage('H1','SF Arch Rival Extended Bold');
}
</script>
...

Up and running

Finally, setup things so the Webfonts calls are triggered after loading the page has finished:


...
<body onload="initialize()">
...

Cleaning up

When you've done all this you will see these elements appear twice in your pages. First the old-fashioned text version, and below them the new images. Hiding the original element is done in your CSS code by adding below snippet: 


...
<style type="text/css">
.wfnt-orig {padding:0;border:none;}
.wfnt-text {display:none;visibility: hidden;}
.wfnt-image {border:none;position: relative;}
</style>
...

Plone Integration

To ease steps 2 to 5 for Plone developers and integrators, we've developed an add-on for Plone3+. It's available from the Cheeseshop, so just add 'nfg.webfonts' to your buildout:eggs. 

[default]
...
eggs = 
        Plone
        elementtree
	...
        nfg.webfonts

zcml = 
	...
	nfg.webfonts

After you install this add-on through the quickinstaller or generic setup, you can configure the apikey via the plone_control_panel, and configure the javascript calls and stylesheet code through the 'webfonts' skin layer.

API (Javascript)

The javascript call that are used to configure the webfonts replacements allow fine-grained selection of DOM elements.

LabelImage(cssSelector, fontName, parent=document)

convert all matching elements to one-liner images.

cssSelector
For the cssSelector you can use any valid CSS2 selector. Like 'H1' or '.someclass', or even 'H1 > p'.
fontName
The name of a font present in collection that the selected APIKEY assigned to it
parent
You can limit the scope of replaced elements to only part of the DOM tree. By default all elements that match the cssSelector are replaced, but you can tell webfonts.biz to only replace matching elements in some DOM element. The getElementById javascript function is used to select the parent.

PhraseImage(cssSelector, fontName, parent=document)

convert all matching elements to multi-line wrapped text block images.