Call Us for a quote at 214.564.5316    4:52:31 PM  5/19/2013

After our brief post regarding font replacement using CUFON we have been innundated with requests on how to manipulate the look and feel of the replacement fonts.

Examples:

This font is placed as a <cite> element

This is placed as a <pre> element

First, a quick recap.  Using a generator script located here you may upload your .ttf or .otf font (if you don't own the license to the font you shouldn't upload it).  The generator saves the result as an SVG font and then converts the paths to VML which is supported natively in IE browsers. The resulting document is converted into JSON and functional javascript. 

So, to include a font in a web page you need only to save the generated .js script, upload it to your site, and then load it with the usual <script> tag like any other javascript.  The external javascript blocks execution until the files have loaded which prevents flickering on font replacement and the compressed files are easily 60% to 80% smaller in byte size than the original.

To implement you simply upload the two javascript files (one for the font replacement and one the standard cufon-yui.js file) and reference them like this:

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="myfont.js" type="text/javascript"></script>

Easy enough and styling is even easier.  First, in order to replace your existing font with the new font you must wrap the text in a CSS element like <h6> or even <p> if you want to replace all of your paragraph text with the new font.

<h6>This font is placed as an h6 header</h6>
<pre>This is placed as a <pre> element</pre>

Now use a simple javascript call to replace the existing font with the new font.

<script type="text/javascript">
Cufon.replace('h6');
</script>

<script type="text/javascript">
Cufon.replace('pre');
</script>

You can even add styles to the javascript like this:

<script type="text/javascript">
Cufon.replace('h6', {
textShadow: '#333 1px 1px, #fff -1px -1px'
});
</script>

Now, how to set font size, color, line-height, margins and padding as promised in the article title?  Use simple CSS!

<style type="text/css">
h6 {
background: #e5e5e5;
color: #FC9;
font-size: 200%;
line-height: 1.2em;
margin: 1em 0;
padding: 10px;
}
pre {
background: #fff;
color: #880000;
font-size: 150%;
line-height: 1.2em;
margin: 1em 0;
padding: 10px;
}
</style>

That's all there is to it!
Happy Coding!