Cufón – Usar cualquier tipografía en una página web

Cufón es una solución que permite agregar cualquier tipografía en una página web.

Se trata de un desarrollo bajo licencia MIT que pretende ser una alternativa a sIFR; consiste de dos partes principales, un generador de fuentes y un motor de renderizado (dibujado) en Javascript.

Principales características:

• No es necesario ningún tipo de plugins, sólo utiliza las características soportadas por el cliente.
• Compatible con los navegador más usados.
• Es muy sencillo de implementar.
• Es lo suficientemente rápido para trabajar con textos extensos.

Implementación

Para usar Cufón en nuestros desarrollos primero necesitamos descargar el archivo Javascript.

Luego tenemos que usar el generador online con la tipografía que queremos utilizar para generar las fuentes a incluir en la página web.

Por último enlazar los archivos de las bibliotecas y escribir el código Javascript que implementará la fuente elegida:

<script type="text/javascript" 
src="/public/javascripts/jquery.js"></script>
<script type="text/javascript"
src="/public/javascripts/jquery.equalheights.js"></script>
<script type="text/javascript" 
src="/public/javascripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" 
src="/public/javascripts/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" 
src="/public/javascripts/styleswitcher.jquery.js"></script>

<script type="text/javascript"
src="/public/javascripts/cufon-yui.js"></script>
<script type="text/javascript" 
src="/public/javascripts/Daniel_400-Daniel_700.font.js"></script>
<script type="text/javascript">
Cufon.replace(['h1','h2','h3','div#availability p',
'body#home div#homeintro p','a.pageprevious','a.pagenext',
'body#search legend','div#content_main p.sampurl',
'div#content_main p.more','ul#main_navigation li a'], {
    hover: true
});
$(document).ready(function() {
$("div.sample p.more a,a.group").fancybox({
'zoomSpeedIn'			: 600,
'zoomSpeedOut'		: 500,
'overlayShow'                  : true,
'overlayOpacity'               : 0.8,
'frameWidth'			: 700,
'frameHeight'			: 450,
'hideOnContentClick'	: false,
'easingIn'				: 'easeOutBack',
'easingOut'			: 'easeInBack'
});
$('div.projects').css({'display' : 'none'});
$('body#search fieldset').equalHeights();
});
$('ul#style-switcher a').styleSwitcher();
</script>

Ver ejemplo: www.acidsmile.co.uk

Cufón

Sitio: cufon.shoqolate.com/generate

Otras lecturas (en inglés):

40 Creative Uses Of Cufón Font Replacement

Sitio: spyrestudios.com/cufon-font-replacement

10 wonderful fonts you can embed with Cufon and Sifr

Sitio: www.catswhocode.com/blog/10-wonderful-fonts-you-can-embed-with-cufon-and-sifr