Home Tips HTML & CSS Tip - Reemplazo de Fuentes con Cufon

Tip - Reemplazo de Fuentes con Cufon

Lunes, 07 Junio 2010 | Escrito por Jhon Marreros Guzman

imagen cufonDetalles Tip - Nivel : Básico, Formato : texto y video
En este tip veremos cómo utilizar fuentes no estándar en nuestro sitio web mediante el uso del remplazo de fuentes con Cufon, esto como alternativa al tip que publiqué anteriormente de google fonts API

 

En el siguiente video muestro cómo utilizar este servicio través de un ejemplo

Suscribete a monitojoomla en youtube para que puedas ver todos los videos publicados

 

1 - ¿Que es Cufon?

Cufon es una técnica de reemplazo de fuentes utilizando javascript, de manera que puedas usar cualquier tipo de fuente en tus diseños web y no solamante las fuentes estándar como Arial, Times, etc.

 

2- ¿Cómo utilizar Cufon?

Para utilizar Cufon es necesario seguir los siguientes pasos :

1- Conseguir el javascript de cufon (cufon-yui.js), el cual es como el intérprete del font javascript generado, lo puedes bajar desde aquí en la opción de descarga de la página oficial

2- Generar la fuente, igualmente a través de la página oficial de cufon generamos la fuente elegida en un archivo javascript, en esta página aparecen una serie de opciones las cuales debemos seleccionar cuidadosamente para no incrementar demasiado el tamaño del archivo generado.

3- Colocar código en nuestro HTML, hacemos referencia a los archivos javascript descargados y seleccionamos las etiquetas sobre las cuales se tendrá efecto.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script src="/cufon-yui.js" type="text/javascript"></script>
 <script src="/Vegur_300.font.js" type="text/javascript"></script>
 <script type="text/javascript">
 Cufon.replace('h1');
 </script>
 </head>
 <body>
 <h1>Hola Mundo</h1>
 </body>
</html>

 

3- Código adicional para IE

Para solucionar un problema en IE se tiene colocar una línea de código antes de la etiqueta </body>, en caso de utilizar otro script como el de Analytics se tendría que colocar antes de este último.

//este paso será obsoleto en el futuro
<script type="text/javascript"> Cufon.now(); </script>

 

Nota

Finalmente indicar que para facilitar el trabajo de Cufon en joomla existe una extensión llamada KC Cufon, la cual pueden descargar desde este link

 

 

Comparte este postDel.icio.us! Google! Live! Facebook! Twitter! Joomla Free PHP
Comentarios (7)
  • 07-06-2010 Javier
    avatar
    Buenísimo,

    en cuanto pueda me lo miro,

    Gracias pos compartir tus Tips.

    Saludos
    Responder
  • 17-06-2010 Javier
    avatar
    Esto me fue bastante útil, Gracias
    Responder
  • 19-03-2011 travisk8
    avatar
    Exelente tuto solo ke tengo una pekeña duda.
    En mi web tengo una divicion donde va un tipo de letra no komun pero solo la uso en esa divicion y no kiero ke kambie en las demas divisiones tengo ke hacer algo asi o komo le aria, un ejemplo:

    html:
    <div id="user1"><h3>Texto de ejemplo</h3></div>

    css:
    #user1 h3 {font-size= 18px;}

    utilizando el cufon solo me va a convertir lo que hay en la divicion user1 en la etiketa h3
    si lo pongo de esta manera?

    Cufon.replace('h3');

    Pero asi pienso ke me va a convertir todos los h3 de mi web, como le hago para ke me konvierta solo los h3 de la divicion user1?
    Responder
  • 01-06-2011 Mai Valls
    avatar
    Gràcies!!! Muy útil ;)
    Responder
  • 05-09-2011 Camilo
    avatar
    Gracias por el tuto
    Responder
  • 20-09-2011 travis
    avatar
    Hola buen dia disculpa y si cufon no me quiere aceptar el tip de letra hay alguna tra forma de que se pueda cambiar la tipografia.
    Espero tu respuesta a mi email.
    travisk8@live.com.ar
    Responder
  • 22-09-2011 Jhon Marreros Guzman
    avatar
    Hola Travis

    Revisa este método alternativo, muy sencillo a través de google fonts y con una extensión para Joomla.

    http://www.webempresa.com/blog/item/375-fuentes-google-en-joomla.html

    Saludos.
    Responder
Escribir comentario
Gravatar enabled