Tag: javascript

JSF – Javascript without taglibs, scriptlets and no pain

Who tried to use an if with javascript with logic operators && or ||, knows how painful this can be inside a JSF page.

Many developer opt to create .js files and reference them with tag <script src=”path_to_file.js”></script>, what is highly recommended, but will increase amount files in your directories when you just need a specific script only in a page and in no other place.

To avoid fails in JSF Render Fase, add a comment followed by tag CDATA after line with <script> and end with another comment closing CDATA, like this:


JSF works parsing these files as XML and the expressions “&&” and “||” are confused with scriptlet’s logic operators or ELExpressions, what causes fail in rendering.

How to show any font in your site with Google Fonts and Cufon

Unfortunately, to display texts using not defaults fonts, this fonts must be installed in user’s computer. What is a problem to the designers.

Now I show two ways to solve that, Google Web Fonts and Cufon.

Google Web Fonts

This tool, unfortunately, have a limited number of fonts that can be used, but your rendering is faster than Cufon.

How to use:

  • First, you must choose the fonts for your site. Go to http://www.google.com/webfonts.
  • Click “Add to Collection” to choose them. In this tutorial I’ve selected “Eater“, “Give You Glory” and “Bonbon“. Memorize their names to later.
  • In the blue bar below, click “Use“. Will be displayed tips for fonts and some methods to attach in your site (“3. Add this code to your website“). I’ve selected the tab “@import”:

  • Copy text box content and past in <style type=”text/css”>…</style> tag:
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Eater|Give+You+Glory|Bonbon);
  • Use their names in “font-family” normally:
    <p style="font-family:Eater">Fonte Eater</p>
    <p style="font-family:Give You Glory">Fonte Give You Glory</p>
    <p style="font-family:Bonbon">Fonte Bonbon</p>

Google Web Fonts is ready to use!


Has long been used, inclusive some WordPress templates. It allows use any fonts, an advantage against Google Web Fonts. Uploading the font, it generates scripts to be used in your site. At current version (1.09), Cufon uses Canvas, taking more processing time and some browsers doesn’t support it.

How to:

  • Download .js file. Open URL http://cufon.shoqolate.com/generate/, right click “Download” and “Save As…” (or “Salve Link As…“).
  • Continuing at http://cufon.shoqolate.com/generate/, upload your font filling “Regular typeface” field. If you want bold and/or italic, upload respective files in “Bold typeface“, “Italic typeface” and “Bold italic typeface“, not mandatory.
  • Check “The EULAs of these fonts allow Web Embedding” (basically informs that you allowed to use these fonts), configure how font will be used in your site setting configuration fields and read terms and check “I acknowledge and accept these terms“, if agree.
  • Click “Let’s do this” to download another .js file, referencing fonts uploaded.
  • Attach javascripts (.js files) in HTML file:
<script type="text/javascript" language="JavaScript" src="<PATH>/cufon-yui.js"></script>
<script type="text/javascript" language="JavaScript" src="<PATH>/<FONT>.js"></script>
  • Let’s put Cufon to work! Call “replace” method of “Cufon” object, setting tag name…:
<script type="text/javascript" language="JavaScript">
//Replaces fonts of tags H1
  • Or id attribute:
<script type="text/javascript" language="JavaScript">
//Replaces font of tags with id="header"
  • Or CSS class
<script type="text/javascript" language="JavaScript">
//Replaces font of tags with class="highlight"
  • You can set more fonts, setting attribute “fontFamily” in method “replace“, this way:
<script type="text/javascript" language="JavaScript">
Cufon.replace('h1', {fontFamily: 'Font 1'});
Cufon.replace('#tagID', {fontFamily: 'Font 2});
Cufon.replace('.class', {fontFamily: 'Font 3});

Cufon is ready!

Click here to download this tutorial.

Now, there is no limit to fonts!

  • Advertisement

  • Advertisement

  • Copyright © 1996-2010 André L. S.. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress