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



cufon-fonts-for-the-people

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

visual-click

Sitio: spyrestudios.com/cufon-font-replacement

10 wonderful fonts you can embed with Cufon and Sifr

fertigo-font

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

Related Posts Plugin for WordPress, Blogger...


Desarrollador de software egresado de la Universidad Católica de Argentina, blogger y fotógrafo.

Trackbacks/Pingbacks

  1. +14 Herramientas web para trabajar con tipografías | Pixelco blog - 08/09/2010

    [...] +Info: Cufón – Usar cualquier tipografía en una página web [...]

  2. Typekit – Otra solución para agregar cualquier tipo de fuentes en una página HTML | pixelcoblog.com blog - 18/10/2009

    [...] Recibí la invitación para probar la beta cerrada de Typekit a fines de septiembre y no tuve tiempo de hacer pruebas hasta la semana pasada. Es una solución que funciona bien, que es sencilla de implementar, pero que en mi caso, sigo prefiriendo otras  que creo yo son más maduras y robustas como Cufón. [...]

  3. Bitacoras.com - 12/10/2009

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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 fuente…..

Comentario