GoPymes's Blog

Cufón, usar cualquier tipografía en tus websites

cufon

Cufón es una librería JavaScript que te permite insertar de manera limpia cualquier tipografía en una página web, reemplazando mediante JavaScript los textos indicados por imágenes, con la única desventaja de que será difícil seleccionar el texto reemplazado y en consecuencia es casi imposible copiarlo al portapapeles.

Cufón es una alternativa a sIFR, que es uno de los sistemas más extendidos para el reemplazo de fuentes. A diferencia de este, Cufón no usa flash, sino SVG (gráficos vectoriales) y es mediante un JavaScript, como se reemplazan los caracteres de la fuente original.

Antes de seguir con la implementación, sería bueno que notes un ejemplo para que sepas en que te estas metiendo =) . Ver ejemplo.

 

Requisito Importante

Recuerda que Cufón no te inventa una fuente, tu debes tener una fuente (TTF) ya en tus manos y con ayuda de cufón podrás subirlo a tu web.

 

Obtener los archivos de Cufón

Descargamos la Librería cufón que vas a incrustarlo en la cabecera de tu website.

 

Convertir la fuente deseada.

Luego, con esta aplicación Online hay que convertir la fuente deseada en otro fichero .js que contendrá las instrucciones necesarias para generar los SVG.

uso cufon

 

Incrustar el código en tu web

Colocar el sgte código en tu cabecera, dentro del <head>

1
<script src="/ruta/cufon.js" type="text/javascript"></script><script src="/ruta/cufon.nombredetufuente.js" type="text/javascript"></script>

Recuerda que: esta librería depende de jquery

 

Cufón! levantate y anda!

Con este pequeño código le darás vida a cufón, indicándole sólo la etiqueta que quieres que reemplaze:

1
2
3
<script type="text/javascript">// <![CDATA[
Cufon.replace ('h1', 'h2', 'h3' );
// ]]></script>

y eso es todo, si estas usando un CMS, tal vez te pueda servir los siguientes links:

Leave a Reply

Your email address will not be published. Required fields are marked *