Tratando de optimizar la carga de Google Fonts API

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