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>
<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>
<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' });
...
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.
Y muchos más artículos interesantes si nos sigues en...
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).
ResponderEliminarQuiero 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.
Botón
ResponderEliminarPágina "estática"
bien, ya lo lei y mañana lo pruebo. pero como hubico la imagen link arriba de las etiquetas? Asi como tenes vos.
ResponderEliminarRodry, esa es una explicación que tengo pendiente, porque todavía no encontré la manera de hacerlo fácil para vosotros.
ResponderEliminaruh, ok! Lo espero impasiente entonces! jeje.
ResponderEliminarOtra 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!
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?
ResponderEliminarSi 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.
ResponderEliminarCon 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.
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!
ResponderEliminaren 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?
ResponderEliminarDisculpa que sea tan hincha, pasa que tengo el tobillo esguinsado y me la paso en la pc cn el blog! jeje
Rodry.D, en tu caso, tienes el código de los tres botones a partir de
ResponderEliminar<div id='menu-holder'>
Y si no sabes cómo crear un enlace, entonces ya tienes que ver esto.
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
ResponderEliminarRodry 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.
ResponderEliminarListo Oloman, tenia un espacio de mas. Eso era!
ResponderEliminarVas a publicar como reemplazar el "entradas antiguas, entradas mas recientes y pagina principal" por las paginas enumerasdas? ejemplo aca
Creo que podré para el final de la semana ;)
ResponderEliminarbuenicimo! 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!
ResponderEliminarah, una curiosidad. yo uso IE 8. y no podia ver tus seguidores. toque la opcion "vista de compativilidad" y ahora si los veo. ;)
ResponderEliminarSí. Lo he comprobado y por fin logro verlos. Otra pista más para anotar...
ResponderEliminaruna 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?
ResponderEliminardesde ya gracias por toda la ayuda q nos brindas!
¿Te has dado cuenta de que casi monopolizas el blog y sobre todo esta entrada? ¡11 comentarios seguidos! Un poquito de calma... :D
ResponderEliminarAmbas preguntas se contestan con esta entrada.
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.
ResponderEliminarSoy 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.
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.
ResponderEliminarPero 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.
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.
ResponderEliminarMuchas 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.
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
ResponderEliminarUn saludo.
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
ResponderEliminarCreo que si sigues los pasos indicados, la cosa no es muy complicada
ResponderEliminarDemasiado difícil, ya lo intente y no paso nada, como se hace para reemplazar el titulo de las entradas????
ResponderEliminarHola 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.
ResponderEliminaren donde se aloja el codigo?
ResponderEliminarEn la última línea hay una actualización con un enlace a otra entrada dónde se explica con más detalle.
ResponderEliminarUna 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?
ResponderEliminarmi blog es gabooblog.blogspot.com espero tu respuesta!
Gaboovillalobos, sólo busca "Notepad Chaos Blogger" en internet y tendrás la base. Lo demás ya es cosa tuya. ;)
ResponderEliminarSe 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.
ResponderEliminarComo hago para justificar mi párrafo.
ResponderEliminarAnó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.
ResponderEliminarSi 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.
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
ResponderEliminarAsí 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
al finnn lo logré gracias al otro post que era sin modificar la plantilla directamente.
ResponderEliminarGracias =)!
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.
ResponderEliminarBuen 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.
ResponderEliminarAlguna recomendacion para modificar el interlineado de una fuente embebida a traves de Cufon?
Gracias
Spidxel, tienes que hacer lo mismo que harías si no tuvieras Cufon.
ResponderEliminarEn 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;}
Hola estoy usando una nueva plantilla en un blog de pruebas... es este:
ResponderEliminarhttp://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.
"...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."
ResponderEliminarMayte, sin te salen es que escogiste alguna de estas :(
Ahora un sistema mejor que este: http://www.google.com/webfonts
Mil gracias, el aporte fue fantastico
ResponderEliminarHola 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...!!!
ResponderEliminarTodoberry, 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.
ResponderEliminarAunque 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.
no funciona el justicar texto con cufon....Me pueden ayudar...gracias.....
ResponderEliminarRafael 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.
ResponderEliminarHola, ¿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.
ResponderEliminarDissenypaco 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.
ResponderEliminarDe todas formas, tras la aparición de Google Fonts, creo que esa opción es mejor que esta de Cufon.
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.
ResponderEliminarGracias y un saludo,
Marian
En esta otra entrada tienes una explicación más detallada para Blogger:
ResponderEliminarInstalacr cufon en Blogger.
Pero... ¿no preferirías utilizar este otro sistema que es infinitamente más fácil?: Google Fonts