Cufon tus fuentes en la web

Estoy trasteando con Cufon asi que voy a hacer una pequeña entrada sobre ello. ¿Que es Cufon? un sistema en JavaScript que permite sustituir la fuente predeterminada de tu web por otra cualquiera.

Lo primero debeis elegir una fuente TTF cualquiera para usar. En dafont podreis encontrar infinidad de ellas, os la descargais y la descomprimiis. No se puede utilizar las fuentes que se encuentran en la carpeta de windows fonts.

Necesitareis descargaros su librería cufon-yui.js y generar una fuente SVG tambien desde su web. Esto se hace de manera muy sencilla. La añadis en el campo «Regular typeface», abajo de todo aceptais los términos y os descargais el javascript generado.

Para usar Cufon en el <head> de vuestra web debeis introducir el siguiente código con la ruta correcta hacia vuestros archivos. Ambas etiquetas deben ir pegadas.

<script type="text/javascript" src="../cufon-yui.js"></script>
<script type="text/javascript" src="../MiFuente.font.js"></script>

Para reemplazar texto es tan sencillo como añadir en el <head>, tras la librería y la fuente, la siguiente sintaxis:

<script type="text/javascript">
Cufon('h1'); //Reemplazará el contenido del h1
Cufon.replace('h2', {fontFamily:'MiFuente'}); //Especificar fuente
</script>

Por problemas con nuestro querido Internet Explorer recomiendan añadir justo antes de la etiqueta </body> el siguiente código:

<script type="text/javascript"> Cufon.now(); </script>

Un ejemplo de cosas que se puede hacer con Cufon, a parte de esta web :P.

Espero que os haya sido útil, seguire ampliando el artículo según vaya investigando sobre esta útil herramienta.

Si teneis dudas, que supongo que sí podeis daros un paseo por su FAQ

1 comentario
  1. Bitacora Economica
    Bitacora Economica Dice:

    Excelente! Estaba precisamente pensando en cambiar las fuentes de una web que estoy creando. Y he aprendido algo que no sabía como se hizo y había usado antes.

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *