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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter