JMiur [E]

Las fuentes de textos que podemos utilizar en una página web son limitadas porque lo que se verá no es necesariamente lo que nosotros establecemos sino aquello que permite el navegador de los visitantes. Podemos decir que un párrafo tendrá la fuente más exótica que se nos ocurra pero, si quien mira la página no tiene esa fuente en su PC, no la verá.

Es por eso que solemos definirlas con varios tipos o familias, para que, si no hay una, se cargue otra:

font-family: Georgia, Arial, Verdana, serif;

Es más, incluso se le agrega un último dato que indica un tipo más generico: serif, sans-serif, cursive, fantasy, monospace y claro, a menos que usemos las fuentes "seguras", el resultado es imprevisible:

Quisque lorem enim, pellentesque nec, tempus ut, pretium in, odio. Donec neque eros, ultricies sit amet, consectetur vel, ullamcorper sit amet, neque! Aliquam metus dolor, commodo ac, ultrices sit amet, blandit at, tellus?

¿ ... se verán las fuentes Bradley Hand ITC y Felix Titling ... ?

Maecenas lectus sapien, iaculis vel, tincidunt vitae, tempus viverra, justo. Fusce augue lacus, convallis id, tincidunt id, aliquet a, ipsum. Duis convallis enim quis pede! Sed ultrices; tortor sed tincidunt semper, massa leo semper lorem, ut luctus nullam.

Es verdad que existen métodos para incrustar fuentes externas utilizando CSS. De algún modo, es similar a insertar scripts, se requiere un archivo externo que se cargará junto con el resto de la página pero, sólo funciona en Internet Explorer y esos archivos, requieren de algún tipo de software para ser creados. A esto, se le suma una limitación más: muchas de las fuentes está protegidas por derechos de copyright y están inhabilitadas para ser insertadas en la web. De todas maneras, la idea es esta:
@font-face {
font-family: 'miFuente';
src: url(URL_archivoMiFuente);
}
p {
font-family:'miFuente', sans-serif;
}
¿Qué podemos hacer con los otros navegadores?

Una solución interesante aunque debemos usarla con prudencia, es la que muestran en divitodesign.com. Allí, hablan de TypeFace, un script que trasnforma HTML y CSS en imágenes y que, en principio, funciona en la mayoría de los navegadores modernos. Su uso es bastante sencillo ... aunque no lo parezca.

Primero, descargamos el script y lo alojamos en un servidor. Ahora (esta es la clave) necesitamos las fuentes y para eso, vamos a convertirlas en scripts utilizando este conversor.

Las fuentes TrueType se encuentran en nuestra computadora en el directorio /WINDOWS/fonts/ y, si queremos usar una de ellas, lo mejor es copiar el archivo en otra carpeta y recién luego convertirlo pero, nos encontraremos con una dificultad más, muchos están protegidos y no podremos usarlos, la herramienta nos lo advertira y se negará a crear el script.

Lo mejor, entonces, es buscar en la web fuentes de tipo open-source; hay muchas y algunos buenos sitios para comenzar a mirar son Open Font Library y dafont.com.

Con la herramienta, podemos convertir todos los que se nos ocurra y tendremos entonces, tantos archivos JS como fuentes alternativas quisiéramos usar. Por supuesto, deberemos alojarlas todas en un servidor..

Ahora, vamos a usarlo.

Supongamos que quiero estas tres fuentes:

5inq_-_Handserif.ttf
martyb_-_Ridiculous.ttf
tthurman_-_Riordon_Fancy.ttf

Las convierto y tengo tres scripts:

handserif_medium.typeface.js
ridiculous_light.typeface.js
riordonfancy_medium.typeface.js

Voy a la plantilla y agrego todo antes de </head>
<!-- cargar el script de la librería -->
<script src='URL_typeface-0.11.js' type='text/javascript'/>

<!-- cargar todas la fuentes -->
<script src='URL_handserif_medium.typeface.js' type='text/javascript'/>
<script src='URL_ridiculous_light.typeface.js' type='text/javascript'/>
<script src='URL_riordonfancy_medium.typeface.js' type='text/javascript'/>
Ya está. Si quisiera usar alguna de esas fuentes, bastaría colocar la clase typeface-js y agregar la familia de la fuente en el atributo style, tal como hacemos normalmente:
<div class="typeface-js" style="font-family: nombreFuente;">
....... el texto a ser mostrado .......
</div>
Ahora, algunos ejemplos colocados en un blog de pruebas utilizando las tres fuentes mencionadas.

Fuente Handserif
<div class="typeface-js" style="font-family: Handserif;">
....... el texto a ser mostrado .......
</div>

Fuente Ridiculous
<div class="typeface-js" style="font-family: Ridiculous;">
....... el texto a ser mostrado .......
</div>

Fuente RiordonFancy
<div class="typeface-js" style="font-family: RiordonFancy;">
....... el texto a ser mostrado .......
</div>

Tanto las fuentes originales como todos los scripts, están disponibles para ser descargados en formato ZIP

Las limitaciones y cosas a tener en cuenta:
  • Por defecto, typeface.js se asocia con los elementos de encabezado (h1, h2, etc.) si en ellos se coloca la familia cargada. En esos casos, no es necesario agregar la clase como debemos hacerlo con cualquier otra etiqueta.
  • Si una etiqueta ya tiene una clase, por ejemplo <div class='fecha">, podemos sumarle una segunda, separándola con un espacio: <div class='fecha typeface-js">
  • Los scripts deben insertarse después del CSS y no antes, caso contrario, Firefox no aplicará el estilo.
  • La propiedad font-stretch no es admitida.
  • En Internet Explorer 7 hay una demora en el renderizado lo que produce un efecto indeseado. Puede solucionarse agregando esto antes de </body>:
<script type='text/javascript'>
_typeface_js.renderDocument();
</script>

43 comentarios:

Ariane  

mais um artigo sensacional! posso repassar a informação em meu blog?

Responder
Gem@  

Eres tremendo!! ¿pero te diste cuenta de verdad lo que has conseguido?

Responder
JMiur  

Claro, Ariane, no hay problema :D

Gem@: Hay que felicitar a quien lo inventó. Es muy interesante aunque hay que usarlo con prudencia porque los scripts de las fuentes no son demasiado pequeños que digamos.

Tenemos para entretenernos un rato :D

Responder
FernandoC  

Me llevo esto :)

Está perfecto.

Responder
Anahí  

Fantástico, una de las cosas que odio de blogger es eso, la falta de opciones de letras. Lo que no entendí es lo de los encabezados, ¿cambian la fuente cuando se instala...?
Salute!

Responder
Anahí  

Ah, tengo otra pregunta, ¿estos js se pueden comprimir, como los otros?

Responder
Marcos Cousseau  

Hace tiempo buscaba algo así! gracias!!!

Responder
Félix  

Está perfecto JMiur, muy útil, de veras. Y como dicen por ahí arriba, con esto tenemos para entretenernos un buen rato, y en mi caso, un poco más :P

Responder
Graciela de Palomas  

qué bonita la Ridicolous!!!,me ha encantado la entrada!!! besos J!!!

Responder
MALINA  

JMiur aun no he probado lo ultimo que me dijiste en la plantilla, ya te diré si conseguimos algo.

Ahora lo que te voy a preguntar es algo sencillo "creo" y es el poder vincular la cabecera del blog a la url del mismo, ya sea una imagen o texto, ninguna de mis plantillas lo hace.

Me dices que debo colocar en el html?

Un abrazo

Responder
Administrador  

Hola..Salu2..
me gustaria saber que parte del codigo de mi Plantilla habria de modificar para cambiarle el Color a las letras del menu horizontal a Simple Vista.no el Color en el que cambia al pasarle el mouse a cada menu.al igual que tambien quiero modificar el Color de el titulo de las entradas a Simple vista.El Color de la fecha de El Post o entrada a simple vista. y tambien el Color de donde dice 0 Comentarios en pequeñito. a simple vista luego de cada entrada!.cuidence!...se les quiere!

Responder
Bonzu Pipinpadaloxicopolis III  

Lo malo es que las fuentes que quiero usar tienen derechos de autor.
Nimodos

Responder
Bonzu Pipinpadaloxicopolis III  

Por cierto creé un tema para celular sobre Vagabundia, es para todos y es una forma de darte gracias JMiur.
Pasa a verlo

Responder
JMiur  

Anahí:
No lo he probado pero, imagino que puede comprimirse. No, los encabezados no cambian a menos que uno quiera, simplemente, el script contempla que pueda hacerse de manera automatica y para ellos, no hace falta agregar la clase CSS.

FREE YOUR MIND:
No sé quién te ha dicho que el spam sea una práctica aceptable para difuncir un sitio. Sea quien sea, está equivocado. Así que, los seguiré eliminando.

Malina:
Si estás usando el header de Blogger, cuando agregas la imagen, tienes la opción de mostar o no mostrar el título como texto y, en principio, la imagen se transforma en enlace al Home en las páginas interiores. Verifica primero eso, que las opciones sean correctas. Usar imagen en lugar del título y la descripción.

Administrador:
No sé cuál es esa plantilla. Me parece que no es la que tienes en tu blog, por lo menos, no se llama Simple Vista. Si me dices donde puede verse online, me fijo.

Responder
JMiur  

Bonzu:
Ese es un problema aunque, en general, siempre hay alguna fuente alternativa. Hay que buscar.

Oh sí. Por cierto, eso lo vi ayer a la nioche y me quedé mudo, ni siquiera sé qué decirte XD ¡Qué locura! :D

Responder
MALINA  

JMiur, no estan añadidas desde blogger sino directamente en la plantilla.

Responder
Bonzu Pipinpadaloxicopolis III  

Ya vez JMiur; Vagabundia para celular XD

Responder
JMiur  

Malina:
¿Podrías enviarme un código de ejemplo? Eso tiene solución pero hay que ver bien como es que es el código que empleas.

Bonzu: :X :D

Responder
MALINA  

JMiur aqui le tienes, pero vamos que yo lo unico que hago es poner la url dirigida a mi imagen, el codigo por otro lado es practicamente standar en todas las plantillas que yo he probado.

No se si me lo dejará insertar blogger en este comentario, pero ahi va.

body {
background:$bgcolor url(http://malinamaniac.iespana.es/IMG%20PLANTILLAS/fondo_malina.png);
background-repeat:repeat-y;
background-position:top center;
margin:0;

Responder
JMiur  

Lo que ocurre (me baso en MALINA MUSIC como ejemplo) es que el enlace está per está dentro de #header h1 que el CSS oculta para que no se vea el texto del título.

Hay dos formas de colocar el header y me temo que son incompatibles. O usamos el élemento Header y allí cargamos la imagen o bien, usamos CSS como en tu caso y en ese caso, TODO el código que coloca Blogger es inútil. Tu método, con algunas variantes, es el mismo que uso yo y creo que es mejor eso que el de Blogger pero, para usarlo y transformar el header en enlace, debemos eliminar o cambiar el código de Blogger de raiz.

Trataré de ponerlo acá pero, cualquier cosa, me mandas un mail y te lo envio:

<div id='header-wrapper'><div id='header-inner'>
<div class='header' id='header'>
<div id='Header1'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='width:100%;height:alturaImagenpx;'/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><div style='width:100%;height:alturaImagenpx;'/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div></div>

Allí sólo importa colocar la altura de la imagen de fondo.

El CSS es similar al que usas:

#header-wrapper {
background: transparent url(URL_imagen) no-repeat;
height: alturaImagenpx;
position: relative;
width: anchoImagenpx;
}
#header-inner {position: static;}

Responder
GuillermoZ0009  

Una consulta:

Y de antemano una felicitacion.

Tendras alguna entrada donde expliques como arreglar el problema de que mi blog se visualiza bien con Firefox, pero la sidebar y la otra no se ven????

Por que?? es la segunda vez que me pasas con un blog...

Te lo agradeciaria mucho Jmiur

Responder
lenaks  

Hola! Llevo un buen rato leyéndote, pero es la primera vez que escribo, primero, para felicitarte por este espacio, me ha ayudado mucho con mi blog.

Lo segundo. Llevaba años (literalmente, no exagero)preguntándome si esto que acabas de postear era posible... wow! Me encantó! Haz logrado llenar ese vacío existencial que tenía en mi... jajaja.

Y lo tercero, quería hacerte una consulta :$ . Tengo un blog desde hace tiempo (otro aparte del personal), y anduve buscándole una plantilla nueva, y me gustó la Linetech (linetech-btemplates.blogspot.com). El problema que tengo es que no se muestra la fecha (la cual quiero modificar para verla al estilo de la de Wordpress), y supongo que eso se debe al hecho de que junto al título de los posts se muestra el número de comentarios,cosa que también me gustaría modificar, pues quiero que aparezcan abajo de las entradas, como en la mayoría de los blogs.

No sé si tengas un tiempecito para ayudarme :$ .

Responder
JMiur  

GuillermoZ0009:
Lo más probable es que el ancho de cada sección sea excesivo. Si eso pasa, las sidebars se van para abajo. En http://generacion-jc.blogspot.com/ lo quye debe haber es un error en un post porque al legar a ese post, la página deja de cargarse en IE. Quítalo temporalmente y fijate el resultado. Las páginas individuales se ven bien, excepto la de ese post en particular.

lenaks;
Hay dos post que pueden ayudarte con el tema de las fechas: 1 2. Tanto eso como los comentarios pueden cambiarse. Yo no hago plantillas pero, si lo intentas y surge alguna dificultad, podría ver si es posible solucionarla.

Responder
GuillermoZ0009  

Mmmm, esta bien, pero como puedo identificar el Post que tiene el error?
Porque solo le pasa con IE, Gracias.

Responder
MALINA  

lenaks es cierto, no aparece la fecha y yo no me habia dado cuenta. La tengo instalada en http://malinafiltrosmaniac.blogspot.com
asi que si JMiur sabe como insertarla la información también será útil para mi.

Responder
MALINA  

aunque bueno... quiza no sale porque debajo del titulo aparece la fecha en todas las entradas, claro que en pequeñito.

Responder
JMiur  

Guilermo:
Vas al blog con IE y miras la página principal. El último post que se muestra es es que contiene el error. Probablemente, haya alguna etiqueta mal cerrada. Los navegadores, resuleven esas cosas según su criterio ya veces, no la pueden resolver.

Responder
lenaks  

JMiur, chequé los artículos y pues me parece que por ahí no va el asunto, de todas formas muchas gracias. Lo que ando buscando creo que si es un poco más complicado de lo que pensaba, porque le busco y le busco a la plantilla y le pregunté ya también a más personas, pero creo que todos nos quedamos igual :P .

Si logro resolverlo o alguien le encuentra el modo, pues ya andaré avisando por aquí.

Saludos!!!

Responder
José GDF  

El ejemplo con la fuente Ridiculous, ¿ha dejado de funcionar o es así, tal como se ve?

Resulta que a una amiga le han dejado de funcionar las fuentes Typeface, y le han arruinado el diseño por completo. Ha comprobado todo, que los enlaces no han muerto lo primero, de hecho llevaba varios días sin tocar la plantilla y de repente ha dejado de funcionar.

Y parece que a ti también te ha pasado, pero solo con esa fuente.

¿Alguna posible explicación de este extraño fenómeno?

Muchas gracias por tu atención.

Responder
JMiur  

Pués acá no veo problemas, hay tres fuentes distintas en el post: riordonfancy, handserif y ridiculous y las tres parecen estar funcionando.

Como tanto las fuentes como el script deben ser alojados en un servidor, lo primero que deben hacer es verificar que existan y que sean accesibles. Si supiera de cuál sitio se trata, me fijaría.

Responder
José GDF  

Te he enviado un e-mail con una captura de pantalla de esta misma entrada.

Y ya te dije que los scripts están correctamente alojados, yo mismo lo he comprobado.

Y no están en Skydrive, sino, lo entendería :D

Responder
MALINA  

JMiur me da la impresión que Jose GDF no tiene instalada esa fuente en su sistema y por eso no puede verla en tu blog o en los otros que dice. Yo si que la veo bien aqui.

Responder
JMiur  

José: No solo SkyDrive trae problemas, mejor ni te cuento los problemas de Fielden :D

Por lo que vi, se producen errores (muchos) que antes no aparecían. En IE8 directamente colapsó la página. No sé donde está el problema pero me temo que debe ser del script que maneja las fuentes.

Malina: Justamente el script lo que intenta es mostrar fuentes aún cuando no las tengas en tu PC, de ahí las dudas.

Responder
Uve  

Hola :)

Ayer comencé a trabajar con un nuevo diseño para mi blog después de que todas las fuentes desaparecieran, y solo yo, que las tengo en mi pc, pudiera verlas. Misteriosamente por la noche comenzaron a verse bien de nuevo. entre aquí, y también se veía la fuente que por la tarde había desaparecido O.o

Hasta ahora... que de nuevo aparece otra fuente en su lugar. Igual que en mi blog claro :)

Los script no los tengo alojados en skydrive.
Ni han caducado, ni nada... es más llevaba sin tocar nada de la plantilla un tiempillo... :(

Responder
José GDF  

Tengo motivos para pensar que está interfiriendo algún otro script de la plantilla. He creado un documento html básico, he puesto tres fuentes de prueba, las de mi amiga, alojadas donde las tiene, y renderiza los textos a la perfección. Si quieres te lo envío por e-mail.

En cuanto descubra qué es lo que está interfiriendo en el funcionamiento volveré para dar cuenta de ello y compartirlo.

Por cierto, antes de enviar este comentario he echado un vistazo a tus muestras, y no renderiza ninguna de las tres, ni en Firefox 3 ni en Opera.

¿Puede un script dejar de funcionar así, sin más? Yo creo que no, vamos :S .

Espero volver con más noticias. Un cordial saludo y gracias ;)

Responder
José GDF  

Creo que lo tengo. He puesto las librerías de las fuentes justo después de <head>, incluso antes de los estilos, y funciona. Pero claro, no es posible justificar los textos. Todo lo más que he conseguido es centrarlos con el típico <center></center>, pero no justificar ni alinear a la derecha.

En mi caso interfería un script que transforma algunas combinaciones de símbolos por emoticonos, como los que tienes para los comentarios :) . Si no funcionase, hay que pensar en cualquier script que transforme un texto en otra cosa. Yo lo puedo solucionar en mi blog de ensayos invalidando ese script para las entradas.

En el caso de mi amiga, creo que sé lo que pasó: no sé cómo hizo para que en el cuerpo de las entradas renderizara un tipo de letra, para los comentarios otra, para la sidebar, otra, pero creo que alguno de los últimos cambios haría que entraran en conflicto y por eso no le van.

Espero que a alguien le sirva de ayuda :D

Responder
JMiur  

lo he probado con una Plantilla Mínima vacía y tampoco parecería funcionar a sí que no sé que decirte :(

Responder
José GDF  

Creé un documento html básico, y lo he subido a mi sitio en Lycos:

Prueba de renderizado

Sigue funcionando, como también en mi blog de pruebas, poniendo el script justo después de <head>, antes del CSS.

Debe ser algo en el propio Blogger, que interfiere en el funcionamiento del script.

De momento dejo el tema, porque nada más soy un aficionado y mis conocimientos del tema no dan más de si, y para lo que lo quiero usar, me sobra, aunque sea haciendo trampa, poniendolo antes del CSS :D.

Muchas gracias por tu tiempo, JMiur. :)

PD: ya habrás supuesto que la amiga a la que me refería se trataba de Uve ;)

Responder
JMiur  

Me temo lo mismo, que debe haber alguna interferencia de un script de Blogger. Están cambiando constantemente esas cosas, sobre todo, las que controlan los comentarios. Eso explicaría el porque de pronto, han dejado de funcionar ciertas cosas.

Responder
Pirrimarzon  

Hola JMiur y enhorabuena por tu blog.

En primer lugar, mi pregunta es bien sencilla. Tengo un blog de blogger, y quiero utilizar la fuente Tahoma (o la Verdana narrow), que no viene predeterminada en blogger. Al ser una fuente gratuita y que está por defecto en windows/fonts de todos los ordenadores, no tengo que cargarla al servidor ni nada. ¿Cómo modifico pues el html de mi blog para que aparezca la fuente Tahoma y pueda seleccionarla?

Gracias y saludos desde España

Responder
JMiur  

Escribiendo el código manualmente porque no hay forma de modificar el editor. Puedes colcoarlo como style (editando el código HTML), por ejemplo:
&ltspan style="font-family:Tahoma;">
o usarla en la plantilla en cualquier definición pero, no hay forma de que aparezca entre las opciones de manera automática.

Responder
RodrigoCba  

Hola, estoy probando TypiFace y anda perfectamente, pero no lo puedo hacer funcionar en un combobox de asp, alguien sabe como hacerlo?

Responder
JMiur  

Ni idea.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR