TTFGen» – Cross Browser and SEO compatible. Wordpress Plugin now available. http://www.ttfgen.com Embed TTF Fonts on your Website. 100% cross browser and SEO compatible. Wordpress Plugin Now Available! Fri, 01 Jan 2010 22:03:08 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Use Custom Fonts on your Website or WordPress page. CSS Based, WordPress Plugin available. http://www.ttfgen.com/news/use-custom-fonts-on-your-website-or-wordpress-page-css-based-wordpress-plugin-available/ http://www.ttfgen.com/news/use-custom-fonts-on-your-website-or-wordpress-page-css-based-wordpress-plugin-available/#comments Fri, 01 Jan 2010 22:02:10 +0000 vinny http://www.ttfgen.com/?p=254 What is TTFGen and what does it do?

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.

How Does it Work?

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.

Styling with CSS instead of jQuery

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! (Search Engine Optimization)

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.

Live Demo
Click here to see TTFGen in action on our live demo page.

]]> http://www.ttfgen.com/news/use-custom-fonts-on-your-website-or-wordpress-page-css-based-wordpress-plugin-available/feed/ 0 Embed any Font in your Website. No Flash needed. Cross Browser compatible. http://www.ttfgen.com/news/embed-any-font-in-your-website-no-flash-needed-cross-browser-compatible/ http://www.ttfgen.com/news/embed-any-font-in-your-website-no-flash-needed-cross-browser-compatible/#comments Fri, 01 Jan 2010 21:59:18 +0000 vinny http://www.ttfgen.com/?p=251 What is TTFGen and what does it do?

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.

How Does it Work?

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.

Styling with CSS instead of jQuery

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! (Search Engine Optimization)

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.

Live Demo
Click here to see TTFGen in action on our live demo page.

]]> http://www.ttfgen.com/news/embed-any-font-in-your-website-no-flash-needed-cross-browser-compatible/feed/ 0 TTFGen for WordPress 1.0 Release today! http://www.ttfgen.com/news/ttfgen-for-wordpress-1-0-release-today/ http://www.ttfgen.com/news/ttfgen-for-wordpress-1-0-release-today/#comments Thu, 03 Dec 2009 04:05:21 +0000 vinny http://www.ttfgen.com/?p=215 TTFGen for WordPress is no longer in beta! We have taken all of your comments, suggestions and bug information and have release version 1.0! Download it at: http://www.ttfgen.com/wordpress

]]> http://www.ttfgen.com/news/ttfgen-for-wordpress-1-0-release-today/feed/ 0 TTFGen for WordPress is now avaialble! http://www.ttfgen.com/news/ttfgen-for-wordpress-is-now-avaialble/ http://www.ttfgen.com/news/ttfgen-for-wordpress-is-now-avaialble/#comments Sat, 07 Nov 2009 05:51:06 +0000 vinny http://www.ttfgen.com/?p=201 The Beta version of the wordpress plugin of TTFGen is now available! Please visit: http://www.ttfgen.com/wordpress for details or http://wordpress.org/extend/plugins/wp-ttfgen/ to download the plugin.

]]> http://www.ttfgen.com/news/ttfgen-for-wordpress-is-now-avaialble/feed/ 0 v1.09 http://www.ttfgen.com/news/v1-09/ http://www.ttfgen.com/news/v1-09/#comments Mon, 05 Oct 2009 20:26:19 +0000 vinny http://www.ttfgen.com/?p=194 Version 1.09 is out. This version includes fixes for the following bugs:
- Safari 4 transparency issues
- TTF Images were being assigned a fixed height (based on the parent container class) when the CSS was set to auto. This has now been resolved.

]]> http://www.ttfgen.com/news/v1-09/feed/ 0 Embed Cross Browser Compatible TrueType Fonts (TTF) on your website. http://www.ttfgen.com/news/embed-custom-truetype-fonts-without-flash/ http://www.ttfgen.com/news/embed-custom-truetype-fonts-without-flash/#comments Thu, 20 Aug 2009 17:23:04 +0000 vinny http://www.ttfgen.com/?p=23 What is TTFGen and what does it do?

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.

How Does it Work?

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.

Styling with CSS instead of jQuery

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! (Search Engine Optimization)

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.

Live Demo
Click here to see TTFGen in action on our live demo page.

]]> http://www.ttfgen.com/news/embed-custom-truetype-fonts-without-flash/feed/ 0