Cufón: usando nuestros propios tipos de letra en la web
Existen diferentes métodos para utilizar nuestras propias tipografías más allá de las estandarizadas (Times, Tahoma, Trebuchet, Arial y Verdana).
Las más utilizadas son las siguientes:
- Exportar el texto en forma de imagen, y usar CSS para reemplazarlo.
- Utilizar imágenes, de forma directa (con la etiqueta img), con el contenido dentro del texto alternativo (poco recomendado).
- Utilizar Flash (no recomendado).
Instrucciones para comenzar
Desde hace tiempo, tenemos disponible el método Cufón. Este método consiste en transformar texto en imágenes de forma automática, con un fantástico método Javascript, en 3 pasos:
- Ve al generador y sube una fuente en formato TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) o PostScript. Procura, además, que la fuente esté abierta, ya que no todas las fuentes de los formatos admitidos, serán aceptadas. Si es posible, sube las 4 variantes: regular, negrita, cursiva y negrita cursiva.
- En el apartado “Include the following glyphs (if available)“, marca la casilla All.
- No es imprescindible personalizar ningún campo más, así que acepta las condiciones de uso. Se descargará un fichero .js que contendrá la fuente “transformada” en Javascript.
- Descarga, en la página del generador, el archivo de Cufón en “Download”.
Una vez tenemos el archivo de nuestro tipo de letra y el archivo de Cufón (cufon-yui.js), vamos a implementarlos en nuestra web:
<script src="/js/cufon.js" type="text/javascript"></script> <script src="/js/fuente.js" type="text/javascript"></script> <script src="/js/jquery.min.js" type="text/javascript"></script>
Como veréis, hemos introducido, también, a Jquery. Jquery es imprescindible para que Cufón funcione en algunos navegadores, como Firefox 3.0 u Opera, ya que necesitan la ayuda de un selector como Jquery para funcionar.
Ejemplos de uso
A continuación, añadimos el primer código:
<script type="text/javascript">
Cufon.replace('h1, h2');
</script>
En este ejemplo, estamos transformando los encabezamientos h1 y h2. Ahora, vamos a rizar el rizo:
<script type="text/javascript">
Cufon.replace('h2 a',{hover:true,hoverables:{a:true}});
Cufon.replace('h3', {textShadow: '#37241d 1px 1px 1px', color: '-linear-gradient(#c1a681, #5e472f, #5e472f)'});
</script>
En este ejemplo, estamos transformando un enlace dentro de un encabezado de segundo nivel (h2 a) y que funcione la propiedad a:hover. Además, a todos los encabezados de tercer nivel (h3), estamos diciéndoles que usen una sombra, con los siguientes datos: #37241d (color) y 1px 1px 1px (dispersión de la sombra, píxeles de posición horizontal y píxeles de posición vertical). También estamos añadiéndole, además, un degradado de color, introduciendo tantos valores como colores de degradado queramos (en nuestro ejemplo, 3 colores). Este es el ejemplo para el H3:
En principio, las propiedades como la negrita, subrayado, cursiva, versalitas y otras, se pueden modificar directamente desde el CSS.
En este enlace tienes explicadas todas las posibilidades para darle estilo a tus fuentes Cufón. Como último consejo, es preferible que utilices un HTML con declaración estricta o, mejor aún, HTML5 para evitar posibles errores a la hora de dar estilos.
Más información: