Cufón es una librería que nos permite utilizar casi cualquier tipografía en nuestros websites, asegurándonos que los usuarios de nuestras páginas puedan observar exactamente la fuente que nosotros elegimos, sin importar si la tienen instalada o no en su sistema operativo. Tiempo atrás hicimos una introducción a Cufón y recomendamos un plugin para utilizarlo con WordPress. En esta nota los guiaremos en el proceso de insertar Cufón en cualquier proyecto web (funciona con WordPress y otras plataformas también).
¿Cuándo se vuelve necesario Cufón en lugar de @font-face?
@font-face es un método increíblemente mas liviano y práctico a la hora de diseñar un website. Pero tiene la desventaja de depender de el navegador y del sistema operativo del usuario para renderizar la fuente, lo que produce que muchos usuarios vean las fuentes pixeladas y nuestro trabajo no se vea tan bonito. Si la tipografía juega un papel crucial en el diseño de tu sitio, es posible que necesites utilizar Cufón.
Paso 1: Descargar la librería
Existen dos sitios desde donde podemos descargar el archivo cufon-yui.js:
http://cufon.shoqolate.com/generate/ (recomendado)
https://github.com/sorccu/cufon
Paso 2: Descargar fuentes
Cufón acepta tipografías .otf y .ttf. Podemos descargarlas desde:
http://www.google.com/webfonts
O bien desde cualquier otro sitio que entregue los formatos indicados.
Paso 3: Convertir las fuentes
Una vez obtenida la fuente necesitamos convertirla en un archivo JavaScript para ser utilizada en nuestro proyecto. Nos dirigimos al formulario ubicado en:
http://cufon.shoqolate.com/generate/
En las imágenes colocamos unicamente los puntos importantes. En la primer sección tenemos que subir el o los archivos correspondientes a nuestra tipografía. Si sólo tenemos uno, utilicemos el primer campo. Recuerden marcar el checkbox.
En la segunda sección maquemos “Basic Latin” y si utilizamos WordPress podemos marcar “WordPress Punctuation“. Además es buena idea añadir los caracteres con acentos y la eñe: áÁéÉíÍóÓúÚñÑ
Finalmente aceptamos las condiciones de uso y clickeamos “Let’s do this!“. En pocos segundos comenzará la descarga de nuestra fuente convertida.
Paso 4: Insertar el código
Entre etiquetas <head> insertamos jQuery, Cufón y el link a nuestra fuente convertida de la siguiente manera:
<script type="text/javascript" src="/scripts/jquery.js"></script> <script type="text/javascript" src="/scripts/cufon-yui.js"></script> <script type="text/javascript" src="/scripts/Bebas_Neue_400.font.js"></script>
Antes del cierre de la etiqueta <body>, le indicamos a Cufón a que etiquetas queremos que se aplique.
<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'h3' );
</script>
Si tenemos múltiples fuentes para gestionar, entonces deberemos especificar la tipografía de la siguiente manera:
<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'h3', { fontFamily: 'Bebas Neue' });
Cufon.replace ('p', { fontFamily: 'Nunito' });
</script>
Esto es todo. Si estás usando algún CMS pueden interesante los siguientes plugins:
Articulos relacionados:
- Utiliza cualquier fuente en tu web con Cufón y Wp-Cufón
- Carrito de compras en Ajax listo para utilizar en cualquier sitio
- Elegantes tablas para precios animadas para cualquier proyecto web y también para WordPress
Via http://feedproxy.google.com/~r/Summarg/~3/a4rFZr0HtVI/
