TrueType Font Generator, or TTFGen, is a combination of PHP and jQuery which allows you to use custom fonts on your website which are guaranteed to be cross browser compatible and SEO Friendly.
TTFGen automatically generates static text images based on your own set of parameters. A small jQuery script is used to call the PHP image renderer, which uses the TTF file to generate the image.
1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript" >
$(document).ready(function() {
$('.ttfTitle').ttfgen( {fsize: 22, font: 'Arial', width: 700, margin: 1, fgColor: '#ffffff'} );
$('.ttfDesc').ttfgen( {fsize: 14, font: 'Calibri', margin: 1, fgColor: '#CCCCCC'} );
}
</script>
...
<h1 class="ttfTitle">For every element with a class name of ttfTitle, a font size of 22 pixels
will be used, among other attributes. </h1>
<h2 class="ttfDesc">The elements themselves will be replaced with an IMG tag that will render
an image of the font with the specified attributes. </h2> |
The script above is using the supplied jQuery plugin to search for all of the elements that have class names of either ttfTitle or ttfDesc. It also makes use of the meta-data plugin for jQuery to provide different font metrics based on the class name. More information is available on the
Guide page.
In the following example, TTFGen will get the values for fonts from the CSS instead of the jQuery
1
2
3
4
5
| <script type="text/javascript" >
$(document).ready(function() {
$('.myHeader').ttfgen();
}
</script> |
1
2
3
4
5
6
7
8
| <style="text/css">
.myHeader {
font-size: 48px; color: red; font-family: 'arial'; width: 700px; text-align: center;
}
</style>
...
<h1 class="myHeader ttfgen">For every element with a class name of ttfTitle, a font size of 22 pixels
will be used, among other attributes. </h1> |
TTFGen is SEO friendly because it uses jQuery to replace text within your website after the page loads. As seen in the example above, the text on the page exists within the H1 and H2 HTML tags. Since the text is not replaced with the images until after the page is loaded, all of text on the page is properly indexed.
Click here to see TTFGen in action on our live demo page.
