BPT. Instalar Cufón en Blogger. | Oloblogger Muchas veces nos gusta alguna que otra tipografía que vemos por ahí y nos la descargamos. Un buen día, decidimos utilizarla en nuestro blog ...

1 de febrero de 2010

BPT. Instalar Cufón en Blogger.

Muchas veces nos gusta alguna que otra tipografía que vemos por ahí y nos la descargamos. Un buen día, decidimos utilizarla en nuestro blog usando FONT-FAMILY y nos queda preciosa de la muerte... Pero hete aquí que otro día cualquiera, nos vamos a otro ordenador y nuestra página se ve con una letra mucho más normal y que por supuesto no es la que nosotros habíamos programado. ¿Se han puesto los hados o directamente los bits en nuestra contra? No. Simplemente ese ordenador no tiene cargada nuestra maravillosa tipografía y por eso es imposible visualizarla en él.

Las fuentes que llevan todos los sistemas operativos "de serie", son relativamente pocas y además, cada uno lleva la suyas propias. Los navegadores cargan las fuentes del ordenador desde dónde esteis navegando y por tanto, si el ordenador no la tiene, el navegador no la puede presentar en pantalla. Para solucionar esto, de momento estamos casi obligados a utilizar las llamadas fuentes estándar que vienen prácticamente con todos los sistemas operativos y que rara vez nos darán problemas.

Este precisamente es el motivo por el cual desde el panel de Blogger Fuentes y Colores, no disponemos mas que de unas pocas fuentes.

Afortunadamente -o no, depende de cómo se mire- hay algunos scripts que permiten sustituir la fuente letra a letra, por gráficos y uno de ellos es Cufón. Estos sistemas hay que usarlos con prudencia porque ralentizan bastante la carga de la página y por ello, conviene usarlos con parte del texto y no con todo.

Para instalar este sistema en Blogger sin depender de servicios de almacenamiento externos, vamos a meter los scripts en gadgets tipo HTML/JavaScript, creados desde Elementos de Página. Así no tocaremos la plantilla y si no nos gusta el resultado, con eliminar los gadgets creados, será suficiente para dejar todo como estaba. O sea que sin miedo.

Vamos a necesitar al menos dos: el script general que realiza la sustitución (cufon-yui.js) y un script adicional para cada fuente nueva a utilizar. Por ser más didácticos, comenzaremos por crear el segundo, que es el que genera las imágenes que sustituirán a la tipografía original con la nueva. La entrada es larga, pero sólo por contemplar todas las situaciones posibles. Realmente son sólo dos tareas:

1. En primer lugar nos descargamos nuestra fuente favorita, descomprimimos si es necesario y localizamos el fichero .ttf correspondiente en nuestro disco duro. Sería conveniente simplificar el nombre del fichero si es algo del tipo fuente_grande.seguro_que_funciona888.ttf. Por ejemplo renombrando a fuentegrande.ttf. Para texto en español, aquí hay que tener cuidado con escoger una fuente que contemple las vocales acentuadas y la ñ, porque de lo contrario, todos esos caracteres no se sustituirán.

Ahora accedemos a este generador online de shoqolate. Las opciones que hay que marcar/rellenar:
  • regular typeface: desde aquí, mediante Examinar, indicamos la fuente a transformar seleccionando entre los fichero de nuestro ordenador. Tiene que ser del tipo .ttf.
  • The EULAs of these fonts allow Web Embedding (without Adobe Flash): lo marcamos si tenemos autorización para usar la fuente. Si no lo marcamos no se generará el código que necesitamos (Ver Fuentes libres)
  • Basic Latin: De todas las opciones, marcamos esa por ser la que ocupará menos K's y para castellano nos vale.
  • units per em: sustituimos el valor que aparezca por 64, por el mismo motivo que antes.
  • I acknowledge and accept these terms: Seleccionamos para aceptar los términos de uso
Pinchamos en Let's do this! y tras unos instantes, obtenemos nuestra fuente transformada en un fichero .js (JavaScript). Lo guardamos en el disco duro.

(Para hacer una prueba rápida, de momento si quereis podeis descargar esta fuente que ya está transformada y copiarla dónde se explica a continuación. Se trata de la script mt bold)


Ahora añadimos nuestro primer gadget desde Elementos de Página (quizás el mejor sitio para colocarlos es en la parte inferior) y allí pegamos el contenido del fichero que antes hemos obtenido. Aunque sea .js, lo podeis abrir con el bloc de notas para copiar y pegarlo. Ya tenemos nuestra nueva fuente disponible.
Actualización: Para que funcione esta parte de código, hay que meterlo todo entre las etiquetas <script type="text/javascript" > y </script>

2. Ahora vamos a instalar el script y la llamada al mismo. Desde aquí podeis descargar todo el código necesario para ello. (También podeis copiarlo desde de esta página que es la fuente original, pero luego habría que meterlo todo entre las etiquetas <script type="text/javascript" > y </script> y añadirle lo de la llamada.)

Copiamos todo en un nuevo gadget HTML/Javascript y guardamos. Desde este momento, todos los títulos de nuestro blog que estén entre etiquetas H1, saldrán con la tipografía script mt bold. Hemos instalado Cufón.


Nos fijamos en las últimas líneas del código que realiza el reemplazo de fuentes:

<script type="text/javascript">

Cufon.replace('h1', { hover: true, fontFamily: 'script mt bold' });

Cufon.replace('#script', { hover: true, fontFamily: 'script mt bold' });

</script>

Cada línea con Cufon.replace..., realiza una sustitución distinta. En este caso, lo que haya entre <h1> y </h1>, será sustituido por la fuente script mt bold, que es precisamente el fichero que grabamos en el primer gadget creado. La segunda línea sustituirá todo lo que se encuentre bajo un ID llamado script por esta misma tipografía. Se supone que no teneis nada bajo el selector script, así que no os saldrá nada con esto, pero se puede hacer una prueba para ver si funciona...

Escogeis cualquier post ya publicado y lo editais. Seleccionais un párrafo cualquiera y le insertais <div id="script"> delante y </div> al final del mismo. Si publicais de nuevo vereis que ese párrafo ha cambiado su tipografía. Como sólo era una prueba, podeis editar de nuevo y borrar lo que insertasteis.

A partir de ahora para cualquier fuente nueva que querais usar, sólo teneis que utilizar la página generadora de fuentes para Cufón y el código que os faciliten meterlo en un nuevo gadget en la forma explicada al principio. No vayais acumulando muchas porque ocupan espacio. Las que vayais descartando se borran eliminando el gadget correspondiente. Luego de instalar la fuente nueva, toca modificar las últimas líneas del gadget que lleva el script "reemplazador" y sustituir script mt bold por el nombre de la nueva tipografía.


Evidentemente, se pueden cambiar también los ID de las capas sobre las que se quiere hacer la sustitución. Si por ejemplo cambiais H1 por BODY, la sustitución se realizará en toda la página.

Pero como hemos dicho antes, sustituir todo puede ser una pesada carga para los navegadores y en ese caso, podría ser conveniente hacerlo sólo con determinados ID. Por ejemplo con el título del blog, las fechas, los títulos de las entradas, de la barra lateral... Sólo tenemos que encontrar el nombre que usa nuestra plantilla: #sidebar-wrapper, #main, #footer, etc... Nótese que si el ID no debe llevar almohadilla en CSS, aquí tampoco hay que ponerla (H1, BODY, etc.)

Para sustituir sólo determinadas partes, tenemos que hacer lo mismo que hicimos en la prueba que antes os propuse e insertar <div id="script"> delante y </div> detrás. script es el selector que yo he escogido para el ejemplo, pero podeis llamarlo como querais. Sólo hay que tener en cuenta que lo que pongamos en el código "reemplazador" tiene que ser lo mismo que usemos después para la etiqueta DIV.


Si queremos utilizar más de una fuente simultáneamente, creamos tantos gadgets como necesitemos con otras tantas fuentes transformadas a .js. Para que no sea nada visible, tendremos que dejar el nombre del gadget en blanco o bien, posteriormente editar la plantilla, buscar por el nombre (artilugios expandidos) y eliminar las líneas que generan el título del gadget y que son:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><div id='script'><data:title/></div></h2>
</b:if>

En el código que realiza el reemplazo teneis que redactar una línea Cufon.replace... por cada combinación ID/FUENTE NUEVA que vayais a utilizar.

Creo que no me dejo nada, así que ¡suerte!

Ver también:
Demo
Cufón. Usar fuentes no estándar.

¿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

46 comentarios :

  1. Hola Oloman.
    Voy a intentarlo, a ver si me sale.
    Por casualidad las pruebas las estas haciendo con la flecha?

    ResponderEliminar
  2. Tengo que probarlo!!! Cuando quiero una fuente chula que mostrar utilizo una imagen retocada con "photochop" y así me aseguro que se puede ver siempre, pero tiene que pesar poco porque si no ralentiza la carga del blog/web.

    * El título tiene una errata, te has comido una S en instalar... si, soy un poco toca-pelotas... jejeje

    Un saludo.

    ResponderEliminar
  3. Sí claro, Cocodrolo ;). Funciona bien ¿no?

    Raúl, no me molesta que me advirtais de errores o fallos en el blog. Al contrario. Gracias y suerte con la instalación.

    ResponderEliminar
  4. Oie oloman otro problemilla:
    Mira e notado que por ejemplo los comentarios se desacomodan. Si alguien comenta ahora por ejemplo que se llame "Raul" y despues comenta "Alberto" bueno pues se supone que Raul comento primero y Alberto despues y pues se ve el comentario de Alberto primero es decir que se acomoda por orden alfabetico y no por el orden que se aia comentado como le hago para que se quede dependiendo el orden en que comenten??

    ResponderEliminar
  5. Mike, eso que comentas es muy extraño. Blogger ordena los comentarios por fecha/hora de publicación. Creo que ni inténtadolo hacer adrede, podría funcionar por orden alfabético.

    Si no tienes ningún sistema de comentarios externo instalado, compruébalo con otras entradas porque me parece que no puede ser.

    ResponderEliminar
  6. Hola Oloman.
    Si, funciona perfectamente, ya te lo he copiado y tengo una preciosa flecha en el de pruebas, me queda cambia la imagen, situarla bien, y ver si funciona con el chat, que creo que seria un logro.
    Antes de empezar con cufon, he estado buscando fuentes y he encontrado una página muy interesante, si te parece bien, podría ponerla aquí.
    Un saludo muy afectuoso.
    cocodrolo

    ResponderEliminar
  7. Claro que me parece bien...

    ResponderEliminar
  8. En esta dirección: (http://www.dafont.com),
    se pueden encontrar 1480 fuentes, y hay alguna verdaderamente espectacular, de momento he podido descargarme todas las que he necesitado.
    Una vez entres en la pagina, pica en: (New fonts), y disfruta.

    Oloman, con parte de tu código he podido poner el chat en el lugar que se quiera, y se queda fijo, para diferentes tamaños de pantalla también sirve, aunque se desplaza un poco.
    Esta situado directamente en un gadget-html, compruébalo y veras, esta prácticamente solucionado.
    Creo que con simples cambios en la numeración se conseguiría ponerlo en un sitio definitivo para todas las configuraciones.

    -div style="display:sccroll;position:fixed; bottom:0px; left:37%;margin-left:410px;">

    Código chat

    -/div>
    Un saludo.
    cocodrolo

    ResponderEliminar
  9. cocodrolo, esa pagina es espectacular! ya la conocia desde hace bastante, creo que un año. tengo mas de 700 fuentes en mi pc, soy un fanatico de las fuentes. Gracias por poner nuevamente la dire porque hace bastante que no la revisaba y ahora me baje nuevas fuentes. saludos!

    ResponderEliminar
  10. Cocodrolo, gracias por el link. Sobre lo del chat, prueba a poner el valor de LEFT en 50% y a aumentar el del MARGIN-LEFT hasta que quede dónde quieres. Con el 50% lo clavas seguro.

    Rodry, ojo con las fuentes que utilizas porque no todas son libres.

    ResponderEliminar
  11. Clavado queda, tal como me has dicho, el chat quedo perfecto en un sitio fijo en cualquier pantalla, bueno en las dos que hay en casa.
    Por el link: es estupendo colaborar.

    La madre del cordero es lo siguiente; llevo desde que pusiste esta entrada dándole vueltas al maldito cufón y me es imposible ponerlo, lo he intentado como tú expones, también de la siguiente manera, que he encontrado vicheando por ahí.

    -script src='URL ALOJAMIENTO/cufon-yui.js' type='text/javascript'/>
    -script src='URL ALOJAMIENTO/font.js' type='text/javascript'/>
    -script type='text/javascript'>
    Cufon.replace('.post-body, h3');
    -/script>
    -/head>

    Los js los he hecho con Dreamweaver cs4 los he alojado en dropbox, he hecho más cosas, pero ninguna me ha servido, esto es una locura, y estoy encabr……ado. pero no va ha poder conmigo.

    Una pregunta Oloman, ¿Sería más sencillo hacer esto de cufón con el código anterior?
    Lo veo mucho menos extenso, a la hora de realizarlo.

    Un saludo.
    cocodrolo.

    ResponderEliminar
  12. Esta entrada intentaba hacerlo más fácil (prácticamente corta-pega), pero lo puedes hacer de cualquiera de las dos maneras. La que a tí te parezca mejor, esa es la buena.

    Creo que el fallo está en Cufon.replace. Creo que dentro de los paréntesis sólo se pueden usar ID, o sea, selectores de almohadilla (#).

    ResponderEliminar
  13. Interesantísimo, guardado en marcadores y cuando vuelva de mis mini vacaciones, el miércoles, lo veo... muchas gracias por publicar algo así, es que estoy creando una super plantilla grunge que cambiará el internet (super modesto, XD) y necesitaba poner un fuente grunge, pero bueno, ya sabes el resto... por sierto, descargué el archivo .pdf original de tu plantilla, porque quería ver la libreta para ensancharla y ponerla en mi blog, ya fue un éxito total!
    Dentro de una semanita de seguro termino la super plantilla y me las veo con todos los super bloggers diseñadores! jeje XD
    Un saludo! Y me suscribí porque no soporto perderme ni un post tuyo!

    ResponderEliminar
  14. Ok ¿Cómo te va en el juego? :D

    ResponderEliminar
  15. Todabía no pude encontrar las diferencias... es que para mi son iguales, lo único que diferencio es que una tiene el cinco, jajaja XD

    ResponderEliminar
  16. Jejeje, ¡podría ser!, pero no es eso. Ya te lo dice el título de la propia imagen ;)

    ResponderEliminar
  17. No puedo hacer el cambio de fuente, sigo todos los pasos... suboi mi fuente, marco las casillas, pongo el 64... abro el archivo .js con el block de notas, lo copio y lo pongo entre <script...
    Más tarde, copio el código que tu nos das y cambio h1 por sidebar h2, que son los títulos de mi sidebar, y sin embargo siguen con la fuente que yo le puse desde el css, que hago mal??

    ResponderEliminar
  18. Era más divertido el nivel anterior :( La palabra Iguales tiene 7 letras... mmm... pero en serio, no encuentro ni una sola diferencia entre la parte izquierda de esta imagen y la derecha... hasta me la descargué y empecé a ver si la distancia en pixeles era igual en una que en la otra, pero mucho sentido no tiene...

    ResponderEliminar
  19. Ascesino96, prueba a usar el código y el .js que se facilita aquí. Una vez que funcione todo bien, ya cambias la necesario para usar tu fuente.

    Y sobre el juego, si no te importa, de eso mejor hablamos en el foro correspondiente. Para finalizar sólo añadir una cosa: ¿quién dijo que las diferencias están dónde tú dices? ;)

    ResponderEliminar
  20. En fin, voy a intentar lo que me dices...

    ResponderEliminar
  21. Probé también con el script que tu me das y no logro nada...
    Podrías entrar a mi blog y decirme si se ve en cursiva o con el ejemplo que tu me das?

    La cursiva es la fuente que yo le puse a mis titulos desde el css...
    Mi blog es tutomax.com

    ResponderEliminar
  22. No. No se ve ningún cambio. El problema es que desde aquí no puedo ver el código que pusiste. Prueba con h2 sólo o h3.

    ResponderEliminar
  23. Puse solo h2... otra cosa que pasa es que me aparece el código del primer script cuando entro a mi blog...
    Que tal si te agrego a mi blog como administrador y vos me ayudas... por sierto, pasé el nivel 5... el 6 si que es complicado...

    ResponderEliminar
  24. Ya he encontrado el fallo Ascesino96. Se me olvidó recordar que el script que genera la fuenta tiene que ir también entre etiquetas SCRIPT. Ya lo he actualizado.

    ResponderEliminar
  25. Pero... puedes instalarme tu la fuente? Porque yo probé con la otra forma y tampoco pude...

    ResponderEliminar
  26. Perdón por el RE-COMMENT, no me di cuenta que ya me lo habías instalado... jeje, ahora cambio el primer código por mi propio código no??

    ResponderEliminar
  27. Q onda OloMan! he realizado este truco en todo el blog cambiando h1 x body, resulta que independientemente de cual utilice, en este caso con body, me sale en la esquina superior izquierda javascript:void(0) esto no se ve a simple vista pues ultilizo el leer + que ya publicaste, al pinchar leer + se nota la palabra indicada. Esta es una entrada de mi blog de pruebas http://transformerspruebas.blogspot.com/2010/02/bueno-ver-como-resulta-esta-vez-eh_21.html Me he dado cuenta que: esa palabrita sale incluso cuando estas guardando el truco como gadget, es decir añadir html, y cuando pones el cursor en guardar esa palabra sale en la parte inferior izquierda de la ventana emergente que te sale de nuevo gadget. Cómo quito esas palabra?
    Gracias!

    ResponderEliminar
  28. Por cierto: se me olvidaba agregar que al hacer este truco, no se porque razón, los post no se pueden seleccionar, yo puedo seleccionar tu post y pegarlo en un doc. word, pero en mi blog no funciona, que raro, talvez tu puedes echarme la respectiva ayudita, estaré pendiente en esta entrada para tus respuestas. Gracias ante todo, y en realidad de tu blog son de alto nivel, me gustan mucho. Aqui d nuevo el link en cuestión, gracias!

    http://transformerspruebas.blogspot.com/

    ResponderEliminar
  29. Falsa alarma!! ya no me aparece; javascript:void(0), únicamente el error que persiste es el de que no se puede seleccionar el texto de la entrada.

    Es cierto lo que dices que si el efecto se pone en todo el texto se relentiza la pagina, pero x lo visto tú usas una fuente no estandard y tu pagina es muy rápida, como le haces?? perdón x preguntar tanto, pero realmente me ha gustado mucho tu pagina, yo quiero poner una fuente tipo Tekton pero que sea libre. Como dije anteriormente, esperare a tus respuestas muy atentamente. Gracias!!

    ResponderEliminar
  30. Rob X ¡no sé a qué te tengo que contestar! Bueno, lo intentaré.

    Con Cufón no se puede seleccionar texto porque realmente no es texto. Como se explica en la entrada, este se sustituye por imágenes que representan letras. En la Demo que se enlaza verás que tampoco puedes seleccionar nada d elo que está convertido. El Archivo del blog no lo está y ese sí podrás seleccionarlo.
    En este blog no utilizo ningún sistema de estos y por eso se puede seleccionar y además no ralentiza. La tipografía que uso es la Comic Sans pero con un letter-spacing:-1 para... ¡que todavía sea más ilegible! :D

    ResponderEliminar
  31. Gracias Oloman, eres un Crack!! "dicese de genio en mi país". Es q esa fuente se ve muy cool en tu blog. Gracias x la respuesta y felicidades!

    ResponderEliminar
  32. Por fin funcionó, pensé que era más difícil, era yo la que estaba haciendo las cosas mal.
    Gracias muy bien explicado

    ResponderEliminar
  33. Muchas gracias por la aportación. Encuentro una dificultad: al no poder editar las imágenes creadas no puede ponerse texto en cursiva ¿o sí? Por otro lado al entrar en la página no se muestra la nueva fuente de inmediato sino que tarda algo de tiempo y mientras tanto aparece la fuente original, lo que no queda muy estético... pasa igual en Explorer, Firefox y Chrome. Saludos.

    ResponderEliminar
  34. Hmmm... no sé si dónde dije que se escogiera Basic Latin por hacer el script más ligero, habría que seleccionar la opción más completa (y más pesad) para que funcionarn las cursivas, negritas, etc.

    Eso contesta también en parte a la segunda pregunta. Cuanto más pesado sea el script, más tiempo se verá la fuente original.

    Se me ocurre que quizás si el código que se dice en el punto 2, en lugar de meterlo en un gadget, se inserta en la propia plantilla, justo después de <body>, probablemente se hagan las sustituciones lo primero o al menos, antes que cuando lo metemos en un gadget.

    Si lo pruebas me cuentas.

    ResponderEliminar
  35. Buen día, no entiendo mucho de esto, pero llegué acá por el siguiente problema: Cargué una plantilla nueva que utiliza una fuente "patalino linotype",la cual posee todos los caracteres del español y sin embargo no muestra las ñ o tildes y estas aparecen en el blog...querría saber si es posible modificar el script de cufón para que interprete estos simbolos tambien, ya que una de las gracias de la plantilla es la combinacion del diseño con esta fuente, que queda muy bien y pasa a ser muy insulsa cuando pongo una regular.
    gracias!!

    ResponderEliminar
  36. Pipi, antes de complicarnos la vida ¿puedes probar esto? Es relativamente nuevo, pero funciona muy bien.

    ResponderEliminar
  37. bueh, ya fue, igual, estoy probando otras plantillas, gracias igual!

    saludos

    ResponderEliminar
  38. Muchísimas gracias, me ha sido de gran utilidad tu post! Estoy creando un blog por primera vez, asi que no tengo mucha idea!! Pero tu post además de ser muy útil, lo explicas fenomenal. Saludos, Eneri.

    ResponderEliminar
  39. Hola Oloman, me ha ido muy bien cambiando la letra en el encabezamiento y los títulos de gadgets, pero no se por qué, no me deja cambiar la letra para la descripción de la cabecera...en el gadget pongo: Cufon.replace('header.description', { hover: true, fontFamily: 'Bambina' }) pero no cambia nada. ¿Sabrías por favor cómo sería el "script" para la descripción?? Muchisimas gracias!!
    http://nubedesabores.blogspot.com

    ResponderEliminar
  40. Perdona Oloman, por fin encontré el error. Hay que poner primero los gadgets HTML de las letras y después de tenerlos todos, instalar el gadget del script general! Gracias! Saludos,

    ResponderEliminar
  41. Eneri: ¡No hay de qué! :D (nunca mejor dicho)

    ResponderEliminar
  42. No entiendo nada...
    ¿como voy a agregar un gadget con todo ese código?

    tampoco se a que se refiere con "añadir lo de la llamada"

    ResponderEliminar
  43. Gradeck Skateboards, son dos trozos de código, uno es el script en sí mismo y el otro es un trozo necesario para que el primero funcione. Si lo haces en el orden que se explica verás como funciona.

    Si quieres puedes intentarlo primero con los ficheros que se facilitan como ejemplo, para que te hagas una idea de cómo son más o menos esos dos trozos. Y no te preocupes por su extensión, los gadgets HTML/JavaScript "tragan" con todo lo que pongas en ellos sin problemas.

    De todas formas, actualmente hay una solución mucho más fácil y es usar Google Font. Mi recomendación es que pruebes primero con esta.

    ResponderEliminar
  44. No se pero como que esta muy dificil hacer esto!!

    ResponderEliminar
  45. Sí, es un poco complicado Marco Antonio, por eso desde que existe Google Font, recomiendo ese otro sistema.

    ResponderEliminar
  46. Gracias Oloman, después de muchos días sin dar con el verdadero problema de mi plantilla, gracias a este artículo, he dado en el clavo. Gracias amigo. Te lo agradezco de verdad. Ésta era la website que me traía de cabeza. Un saludo

    www.astronomy.es

    ResponderEliminar