El uso de las fuentes de la llamada Google Font API se va extendiendo pero, en sistemas de blogs como Blogger suele tener algunas limitaciones. Por un lado, hay una demora notable entre la carga de los sitios y la carga del API por lo que suelen mostrarse las fuentes con los valores por defecto establecidos para las etiquetas y, pasado un tiempo, cambian.

Esto no es fácil de resolver pero hay algunas alternativas; una de ellas es ocultar temporalmente el body de la página y mostrarla pasados unos cuantos segundos; puede hacerse de modo sofisticado o, simplemente, poniendo algo así antes de </head>
<style> body { visibility:hidden; } </style>
<script>
//<![CDATA[
  setTimeout(demora,3000); 
  function demora() { document.body.style.visibility = "visible"; }
//]]>
</script>
donde 3000 es el tiempo que se expresea en milisegundos (1000 = 1 segundo)

Otra forma es la que indica el mismo Google y es más razonable pero, para eso, en lugar de usar la etiqueta LINK:

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css' />
debemos cargar las fuente con JavaScript:
<script type='text/javascript'>
//<![CDATA[
  WebFontConfig = {google: { families: [ 'Shadows Into Light' ] } };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
//]]>
</script>
y luego, establecer las reglas para una serie de clases que define el mismo API:
<style>
  .wf-loading { visibility: hidden; }
  .wf-active, .wf-inactive { visibility: visible; }
</style>
De este modo, cualquier etiqueta que utilice esas fuentes, permanecerá invisible hasta que sea cargada.

En el script, esta línea indica los tipos de fuente:
WebFontConfig = {google: { families: [ 'Shadows Into Light' ] } };
si usamos varias, las separamos con comas:
WebFontConfig = {google: { families: [ 'Shadows Into Light', 'Paytone+One' ] } };

Quisque et elit mi? In volutpat accumsan est ut auctor! Vivamus vulputate turpis non urna dignissim vehicula. Praesent id tortor et turpis lacinia elementum ut nec libero. Maecenas mollis tincidunt mi, vitae scelerisque sapien porttitor vitae. Nulla sed risus non orci interdum ultricies.

Vagabundia

Otra dificultad se genera cuando queremos usar "fuentes especiales" en alguna entrada en particular y no en todo el sitio. Eso, no lo podemos hacer utiizando la etiqueta LINK pero podemos usar la etiqueta STYLE  e "importar" la fuente de este modo:
<style type="text/css"> @import url("http://fonts.googleapis.com/css?family=Shadows+Into+Light"); </style>
Obviamente, dependiendo de cada sitio, tendrá el mismo inconveniente de la demora así que, llegado el caso, también podemos usar el script cargador porque funcionará perfectamente, tanto en una entrada como en la plantilla.

En todos los casos, utilizaremos esta fuente del mismo modo que usamos cualquier otra, ya sea en una etiqueta, ID, una clase o directamente inline:
h1 { font-family: Paytone One,Arial,serif; }
#titulo { font-family: Shadows Into Light,Arial,serif; }
.mifuente { font-family: Paytone One,Arial,serif; }

<div style="font-family: Shadows Into Light,Arial,serif;"> ....... </div>
Un detalle interesante es que se nos permite reducir el tiempo de carga de cualquier fuente que vayamos a utilizar, seleccionado los caracteres deseados, algo que es útil cuando, por ejemplo, sólo quemos emplearla para el logo o algo semejante (más información).

Esto, se hace agregado el parámetro text=valor y, aunque es una función en desarrollo, parece funcionar perfectamente:
http://fonts.googleapis.com/css?family=Paytone+One&text=Vagabundia
donde es necesario codificar la URL, transformando los caracteres que no sean alfanumericos, por sus equivalencias. Por ejemplo %20 es un espacio:
http://fonts.googleapis.com/css?family=Inconsolata&text=Google%20World
Otros caracteres usuales:
á %c3%a1
é %c3%a9
í %c3%ad
ó %c3%b3
ú %c3%ba
ñ %c3%b1
¡ %c2%a1
¿ %c2%bf

8 comentarios:

Vendetta  

hola amigo JMiur una consulta fuera de este tema..¿sabes algun codigo para proteger una imagen? un ejemplo: asi como la imagen que tienes en tu cabecera .. se puede hacer eso

Responder
JMiur  

La imagen del header de este blog está colocada como fondo en la propiedad background y no dentro de una etiqueta IMG pero, eso no garantiza en absoluto que no pueda ser copiada.

A decir verdad, no existe ningún método para evitar esas copias; todo lo que se publica en la web se puede copiar con mucha facilidad.

Responder
Johnny  

Buenas, JMiur. Muy interesante el articulo, a raiz del mismo te queria preguntar si existe algun script que optimice la carga del blog en general.

Responder
JMiur  

No que yo conozca. No sé ahsta que punto sería posible hacer eso si no es de modo manual; en general, cualquier cosa automática, es impredecible.

Responder
Gem@  

Sus deseos son órdenes, ya está funcionando :)

Responder
JMiur  

Eso acabo de ver :D

Asusta mi poder de persuasión !!!!!!!!!!!!

Responder
Gem@  

De vez en cuando es bueno ser optimista y generoso con uno mismo :D

Responder
JMiur  

Bien. tomaré en cuetna el consejo :D

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