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

http://www.fontsquirrel.com/

http://www.cufonfonts.com/

http://www.urbanfonts.com/

http://www.1001freefonts.com/

http://www.dafont.com/es/

http://www.free-fonts.com/

http://www.fontreactor.com/

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 clickeamosLet’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:

Cufón para WordPress

Cufón para Drupal

Cufón para Joomla

Cufón para vBulletin

Articulos relacionados:

  1. Utiliza cualquier fuente en tu web con Cufón y Wp-Cufón
  2. Carrito de compras en Ajax listo para utilizar en cualquier sitio
  3. Elegantes tablas para precios animadas para cualquier proyecto web y también para WordPress


Via http://feedproxy.google.com/~r/Summarg/~3/a4rFZr0HtVI/

Related Posts with Thumbnails
 

Comments are closed.

WordPress Blog