BPT. Instalar Cufón en Blogger. – Auto – Auto

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 usandoFONT-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 llamadasfuentes 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 BloggerFuentes 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 esCufó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 tipoHTML/JavaScript, creados desdeElementos 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 tipofuente_grande.seguro_que_funciona888.ttf. Por ejemplo renombrando afuentegrande.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 estegenerador 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 enLet'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 desdeElementos 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 elbloc 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í podeisdescargar 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 etiquetasH1, saldrán con la tipografíascript 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 conCufon.replace..., realiza una sustitución distinta. En este caso, lo que haya entreh1 y/h1, será sustituido por la fuentescript 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 unID llamadoscript por esta misma tipografía. Se supone que no teneis nada bajo el selectorscript, 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 insertaisdiv 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 lapá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 sustituirscript mt bold por el nombre de la nueva tipografía.

Evidentemente, se pueden cambiar también losID de las capas sobre las que se quiere hacer la sustitución. Si por ejemplo cambiaisH1 porBODY, 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 determinadosID. 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 elID 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 insertardiv 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 etiquetaDIV.

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 != ""'
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íneaCufon.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.

CosasParaMiBlogs

lunes, 1 de febrero de 2010

BPT. Instalar Cufón en Blogger. – Auto – Auto – Abogado

Popular Posts

Blogger news

Labels

Blog Archive