Cufón. Usar fuentes no estándar. | Oloblogger 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...

27 de enero de 2010

Cufón. Usar fuentes no estándar.

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.

Como casi siempre, antes de seguir podeis ver una página de ejemplo para que considereis si os interesa aplicar este sistema en vuestra web.

Aún siendo algo farragosa, su instalación no es nada complicada. En primer lugar, hay que descargar el script que realiza la tarea de sustitución y subirlo a nuestro espacio. 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. Igualmente lo alojamos en nuestro sitio. Por último, generamos el código en la página usando las direcciones de los dos ficheros .js:

<html>
<head>
<script src="http://DIRECCION/cufon-yui.js" type="text/javascript"></script>
<script src="http://DIRECCION/Imposiblefont_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>Este texto se verá con la fuente Impossiblefont</h1>
</body>
</html>

En este ejemplo, se ha usado el tag H1 para sustituir sólo lo que se encuentre dentro de él. Si quereis que la sustitución se realice para toda la página, habrá que utilizar BODY. Si quereis que sea en un div concreto, tendreis que utilizar algún ID pre-existente o que incluyais ahora para estos efectos (#outer-wrapper, #main, #sidebar... etc.). Haced pruebas antes de decidiros por sustituir la página entera, porque este cacharrito demora bastante la carga de la página.

Por cierto que en IE (cómo no...), en ocasiones se visualiza el texto original antes de realizar la sustitución, lo que provoca un efecto que queda regular. Para atenuar -que no solucionar- esto, justo antes de </body> es conveniente insertar esta instrucción:

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

No me he metido demasidado a fondo en todas las opciones, pero para generar el fichero de la fuente (variante vectorial) en la aplicación de cufon.shoqolate, al menos tenemos que tener en cuenta lo siguiente:

  • Regular typeface: Aquí es desde dónde subimos la fuente original. Los otros campos son para varianes de negrita, itálica y negrita+itálica que pudieran existir de la misma fuente.
  • The EULAs of these fonts allow Web Embedding (without Adobe Flash): Tenemos que seleccionar que estamos autorizados a usar la fuente original para que el programa nos permita hacer la conversión. En este sentido, recordar un par de alternativas donde podeis encontrar fuentes libres.
  • Include the following gliphs...: Aunque recomiendan marcar "All", eso hace mucho más pesado el fichero resultante. Con Basic Latin yo obtuve unos resultados muy aceptables. De todos modos, cualquiera de los tres siguientes (Latin-1 Supplement, Latin Extended-A y Latin Extended-B) deberían demorar menos la carga, cubriendo la gran mayoría de los casos. Comentar también aquí, que muchas fuentes son de origen no castellano, por lo que normalmente no tienen previstos los caracteres vocálicos acentuados... y casi nunca la ñ. Comprobadlo antes de poneros a hacer conversiones y os ahorrareis trabajo.
  • Scale the font to the following size: Cuanto mayor sea el número, mayor fidelidad de fuente incluso en caracteres de gran tamaño. Si no lo vais a utilizar para rótulos gigantes, mejor escogeis el valor mínimo (64). Esto reduce bastante el tamaño del script.
  • I acknowledge and accept these terms: Imprescindible aceptar los términos de uso par generar el fichero.
  • Por lo general, el resto de opciones que vienen por defecto se pueden dejar tal cual salen.

Más cosas... Puede que queramos utilizar varias fuentes sustitutivas. En este caso y como es lógico, en primer lugar todas ellas tienen que pasar por la previa transformación a SVG. Luego, la llamada a cufon.js cambia un poco:

<script src="http://DIRECCION/cufon-yui.js" type="text/javascript"></script>
<script src="http://DIRECCION/Imposiblefont_300.font.js" type="text/javascript"></script>
<script src="http://DIRECCION/Otrafont_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Imposiblefont' });
Cufon.replace('h2', { fontFamily: 'Otrafont' });
</script>

En este ejemplo, todo lo contenido entre etiquetas H1 se cambiará a la fuente Imposiblefont y lo que esté entre H2, a Otrafont. Se puede sustituir cualquier ID que utilicemos en nuestra plantilla, para lo cual ya habría que incluir la almohadilla:

...
Cufon.replace('#footer-wrapper', { fontFamily: 'Imposiblefont' });
Cufon.replace('#especial', { fontFamily: 'Otrafont' });
...

Problemas conocidos, consultas frecuentes y más detalles técnicos en GitHub y para dentro de unos días, un BPT para instalar todo esto en Blogger sin tener ni idea ;).

Actualización: BPT. Instalar Cufón en Blogger.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

50 comentarios :

  1. Hola amigo! como estas? te queria preguntar como hago para poner un boton que te lleve a otra pag. ejemplo, vos tenes el que dice ¿ESTO QUE ES? yo quiero poner uno igual que diga "SOBRE MI". (mira mi blog asi me entendes mejor) rodrycompany.blogspot.com (arriba de donde estan las etiquetas).
    Quiero que tamb lleve a mi perfil, con caracteristicas mias.
    Entonces:
    1) como hagoel boton.
    2) como hago la pag con mis caracteristicas para llegar ahi mediante el boton.

    ResponderEliminar
  2. bien, ya lo lei y mañana lo pruebo. pero como hubico la imagen link arriba de las etiquetas? Asi como tenes vos.

    ResponderEliminar
  3. Rodry, esa es una explicación que tengo pendiente, porque todavía no encontré la manera de hacerlo fácil para vosotros.

    ResponderEliminar
  4. uh, ok! Lo espero impasiente entonces! jeje.
    Otra cosa, el menu desplegable, ni vos ni yo se lo podemos aplicar a las etiquetas no? digo, porque el la primera de la sidebar y la parte de arriba es parte del fondo no?
    En mi blog dice etiquetas pero en realidad es el titulo de cada post, y si sigo posteando se va a hacer larguisima!
    se puede aplicar el menu desplegabla a esa parte? que me recomensas que haga sino?
    desde ya gracias por la ayuda!

    ResponderEliminar
  5. otra cosa, ya sabes que tengo la misma plantilla que vos: cuando comentan no se ve los avatares. solo se ven los nombres. que tengo que hacer para que se vean?

    ResponderEliminar
  6. Si se pueden hacer desplegables, pero en tu caso se ven sólo los 15 últimos posts, por lo que nunca se hará más largo que eso. De todas formas, en esta entrada (y las dos anteriores si lo necesitas), se puede ver cómo hacer eso con una sección, que así es como lo tiene montado esta plantilla.

    Con respecto a los avatares, echa un vistazo a esto otro. Después es posible que tengas que tocar el CSS para que quede en el sitio donde quieras.

    ResponderEliminar
  7. Sin duda, sos el maradona de los blogs! sos el mejor del mundo! jaja ya arregle lo de los avatares. pero quedan como medios colgados porque quedan afuera del recuadro del comentario. Muchas gracias oloman!

    ResponderEliminar
  8. en tu buscador, los 3 botones de abajo (indice, enlazar y s*ingenio) te llevan a distintas URL. como les pones a cada una la url para cual te lleva?
    Disculpa que sea tan hincha, pasa que tengo el tobillo esguinsado y me la paso en la pc cn el blog! jeje

    ResponderEliminar
  9. Rodry.D, en tu caso, tienes el código de los tres botones a partir de
    <div id='menu-holder'>

    Y si no sabes cómo crear un enlace, entonces ya tienes que ver esto.

    ResponderEliminar
  10. listo oloman, gracias, pero no se porque el boton del menu del medio (perfil) funciona lo mas bien, pero cuando pongo el mouse arriba no aparece como seleccioando. mi blog aca

    ResponderEliminar
  11. Rodry D, eso es porque en #about a:hover no has usado la imagen correcta. Tiene que ser la misma que en los otros dos hover encima y debajo de ese.

    ResponderEliminar
  12. Listo Oloman, tenia un espacio de mas. Eso era!

    Vas a publicar como reemplazar el "entradas antiguas, entradas mas recientes y pagina principal" por las paginas enumerasdas? ejemplo aca

    ResponderEliminar
  13. Creo que podré para el final de la semana ;)

    ResponderEliminar
  14. buenicimo! lo espero. Algun dia de estos voy a publicar una entrada de agradecimiento a las personas que le ponen onda a mi blog, y vos vas a estar seguro! nos vemos!

    ResponderEliminar
  15. ah, una curiosidad. yo uso IE 8. y no podia ver tus seguidores. toque la opcion "vista de compativilidad" y ahora si los veo. ;)

    ResponderEliminar
  16. Sí. Lo he comprobado y por fin logro verlos. Otra pista más para anotar...

    ResponderEliminar
  17. una duda mas: Como pusiste la cabecera que dice OLOBBLOGER? yo cargo una imagen en la mia y no se ve! que hago? me gusta el efecto que le pones a los botones que se resaltan con un borde blanco. como lo haces?

    desde ya gracias por toda la ayuda q nos brindas!

    ResponderEliminar
  18. ¿Te has dado cuenta de que casi monopolizas el blog y sobre todo esta entrada? ¡11 comentarios seguidos! Un poquito de calma... :D

    Ambas preguntas se contestan con esta entrada.

    ResponderEliminar
  19. que de los 11 hago 6 preguntas. el resto es alagos o afirmacionde que me salio. te molestan que te hagan 11 comentarios? a mi me alegraria que me hagan 11 comentarios en un dia.
    Soy la clase de persona que le gusta actualizar el blog y brindar algo nuevo a los que entrar. capaz q eso hace q te llene de preguntas. perdon si te molesto.

    ResponderEliminar
  20. Claro que no me molesta Rodry y por supuesto que te agradezco los halagos. Lo que ocurre es que por una parte te veo con mucho ímpetu, por otra, no tengo casi tiempo de atender las consultas concretas sobre un post, por lo que me cuesta horas (ya de sueño) el poder contestar cuestiones más particulares y por último, me cuesta recibir elogios. Eso no lo puedo remediar, pero me incomodan un poco.

    Pero no te preocupes. Sólo te pido un poco de mesura y a ser posible, espaciar un poco más tus consultas. Perdona si sonó mal la forma en la que lo dije inicialmente. De verdad.

    ResponderEliminar
  21. Oloman, tenes razon. Me volvi insoportable. De tener 18 años pase a tener 13. xD Pero como te dije, al tener el tobillo esguinsado me la pasaba con el blog. Sobre los alagos, todo bien, creo q sos la primer persona q conosco que le molestan xD pero respeto tu opinion. Y no me di cuenta que un monton de gente te pregunta cosas y llega un momento que cansa. mas sabiendo que tenes una esposa, una vida y la tenes que aprobechar al maximo.
    Muchas gracias por tu sinseridad y por la ayuda.

    PD: me compre una bateria, para ambos va a ser bueno. me entretengo con eso y te dejo descansar xD
    para desgracia de mi familia, un ruido tremendo todo el dia! jaja
    chau oloman, hasta la proxima consulta.

    ResponderEliminar
  22. Soy raro, pero no tanto. No me molestan los elogios, simplemente me siento algo incómodo con ellos y... ¡dale a tu familia mi más sentido pésame por lo de la batería! XD

    Un saludo.

    ResponderEliminar
  23. Tengo apuntado esta entrada a ver si me puedo poner con ella un poco más. Lo intenté situar pero no funcionó, y también me estuve pegando con TypeFront http://typefront.com/ pero nada, no hay forma... A ver si tengo un rato largo para ponerme a crear un diseño en condiciones y vuelvo con estos códigos. Dos horas mirándolos fijamente y estoy segura de que terminarán por funcionar... aunque sea por pena XD

    ResponderEliminar
  24. Creo que si sigues los pasos indicados, la cosa no es muy complicada

    ResponderEliminar
  25. Demasiado difícil, ya lo intente y no paso nada, como se hace para reemplazar el titulo de las entradas????

    ResponderEliminar
  26. Hola Yurika-Chan, en lugar de h1 o h2, para los títulos tienes que usar h3. Si no te sale, prueba con el siguiente post a este, que también puedes encontrar en el enlace de la última línea de esta entrada.

    ResponderEliminar
  27. En la última línea hay una actualización con un enlace a otra entrada dónde se explica con más detalle.

    ResponderEliminar
  28. Una pregunta...es primera vez que visito su pagina y me parece cool lo que haces y todo...pero la pregunta en si era..."¿como hago para tener la misma plantilla que tú?"...es que para serte sincero ME GUSTA y la quiero en mi blog...pero no se como ponerla...x( ¿podrias explicarme?

    mi blog es gabooblog.blogspot.com espero tu respuesta!

    ResponderEliminar
  29. Gaboovillalobos, sólo busca "Notepad Chaos Blogger" en internet y tendrás la base. Lo demás ya es cosa tuya. ;)

    ResponderEliminar
  30. Se me olvidaba. Sin ánimo de infravalorarte, esa plantilla es algo complicada de mantener, así que si no controlas mucho, mejor utiliza un blog de prueba.

    ResponderEliminar
  31. Como hago para justificar mi párrafo.

    ResponderEliminar
  32. Anónimo, depende de como tengas construidos esos párrafos. Lo puedes hacer metiendo directamente en el HTML del párrafo style="text-align:justify;" o metiendo la propiedad text-align=justify; dentro del selector p.
    Si habilitas tu perfil para ver tu blog y me dices qué párrafo exactamente o qué tipo de párrafos, podría ser más concreto.

    ResponderEliminar
  33. Buenas, no sé qué estoy haciendo mal, pero no me sale, lo probé en el blog subiendo los archivos en Google Sites, y nada, no se modifica nada :S
    Así que despues intenté hacer la prueba en la pc, pero tampoco... y luego pegue el contenido de los archivos directamente en la misma página y no.. no hay caso ...
    BUeno, espero puedas ayudarme :)
    Saludos-
    Carolina

    ResponderEliminar
  34. al finnn lo logré gracias al otro post que era sin modificar la plantilla directamente.
    Gracias =)!

    ResponderEliminar
  35. Sí. El otro post lo hice precisamente pensando en los usuarios de Blogger y supongo que está mejor orientado para instalarlo en nuestra plataforma. Un saludo.

    ResponderEliminar
  36. Buen articulo, lo seguí paso a paso y logre embeber fuente mediante un div CSS. Tuve algún problema con el interlineado del parrafo de texto, quería aumentarlo y no lo logre.

    Alguna recomendacion para modificar el interlineado de una fuente embebida a traves de Cufon?

    Gracias

    ResponderEliminar
  37. Spidxel, tienes que hacer lo mismo que harías si no tuvieras Cufon.

    En tu hoja de estilo creas una ID con el mismo nombre que utilizaste para el reemplazo y ahí colocas las propiedades que quieras. Por ejemplo, para el último mencionado en el post:

    #especial {line-height:1.8em;}

    ResponderEliminar
  38. Hola estoy usando una nueva plantilla en un blog de pruebas... es este:

    http://probikando.blogspot.com

    Todo esta perfecto y esta dentro del código de la plantilla, pero resulta que no sé si se pueda añadir algún código para que el script muestre en al cambio de letra los acentos y la ñ. Ojala puedas ayudarme.

    Gracias.

    ResponderEliminar
  39. "...muchas fuentes son de origen no castellano, por lo que normalmente no tienen previstos los caracteres vocálicos acentuados... y casi nunca la ñ. Comprobadlo antes de poneros a hacer conversiones y os ahorrareis trabajo."

    Mayte, sin te salen es que escogiste alguna de estas :(

    Ahora un sistema mejor que este: http://www.google.com/webfonts

    ResponderEliminar
  40. Mil gracias, el aporte fue fantastico

    ResponderEliminar
  41. Hola OLOMAN tengo una pregunta sencilla....como dejo predeterminado una sola fuente con un solo tamaño para cuando vaya a hacer un post o entrada nueva, es decir, si llegase a postear por correo de una vez me quede definida en la plantilla el tipo de fuente verdana con el tamaño normal.....gracias y saludos desde Venezuela...!!!

    ResponderEliminar
  42. Todoberry, me parece que tú usas una plantilla de las del nuevo diseñador. Si no has tocado nada en cuanto a fuentes en la plantilla, sólo tienes que entrar en el "Diseñador de Plantillas" y desde ahí cambiar tipo y tamaño de la fuente en las entradas.

    Aunque en tu editor de posts no lo veas, cuando se publique algo, se hará con el tipo de letra que programes ahí. Con Vista Previa podrás comprobarlo antes de Publicar.

    ResponderEliminar
  43. no funciona el justicar texto con cufon....Me pueden ayudar...gracias.....

    ResponderEliminar
  44. Rafael Arevalo por lo que yo conozco no se puede. Piensa que una vez transformadas las letras, lo que tenemos son imágenes y estas no se pueden justificar para dejar espacios variables entre ellas que hagan cuadrar los dos lados del párrafo. Como mucho creo que se puede centrar.

    ResponderEliminar
  45. Hola, ¿esta sustitución de fuentes de Cufón también funciona en móviles? En mi Nokia no sale el h1 modificado con Cufón(en el navegador esta perfecto). Gracias.

    ResponderEliminar
  46. Dissenypaco pues si no se ve en tu móvil es que no se verá en ellos... afortunadamente. No caí en su momento en los dispositivos móviles, pero este sistema es algo pesado para sus conexiones lentas.
    De todas formas, tras la aparición de Google Fonts, creo que esa opción es mejor que esta de Cufon.

    ResponderEliminar
  47. Hola. Me gustaría saber como hago para que salga la fuente elegida en un gadget de texto. He hecho todo lo que dices (he puesto el script después de "head", con las URLs de los dos archivos .js, pero ya no se como hacer la llamada para que la fuente se vea en el gadget de texto.
    Gracias y un saludo,
    Marian

    ResponderEliminar
  48. En esta otra entrada tienes una explicación más detallada para Blogger:
    Instalacr cufon en Blogger.

    Pero... ¿no preferirías utilizar este otro sistema que es infinitamente más fácil?: Google Fonts

    ResponderEliminar